import locale from '../locale/locale';
import Store from '../store';
import luckysheetConfigsetting from './luckysheetConfigsetting';
import { getObjType } from '../utils/util';
import { createToolbarHtml } from './toolbar';
import alternateformat from './alternateformat';
import conditionformat from './conditionformat';
import menuButton from './menuButton';
import { isRealNull, isEditMode } from '../global/validate';
import pivotTable from './pivotTable';
import { getSheetIndex, getRangetxt } from '../methods/get';
import { getdatabyselectionD, getcellvalue, datagridgrowth } from '../global/getdata';
import { 
    jfrefreshgrid, 
    jfrefreshgrid_rhcw,
} from '../global/refresh';
const _locale = locale();
const locale_filter = _locale.filter;
const locale_button= _locale.button;
//dom variable
const gridHTML = function(){ 
    const _locale = locale();
    const locale_info = _locale.info;
    const locale_print = _locale.print;
    const userInfo = luckysheetConfigsetting.userInfo === true ? '<i style="font-size:16px;color:#ff6a00;" class="fa fa-taxi" aria-hidden="true"></i> Lucky' : luckysheetConfigsetting.userInfo; // When true, use the default HTML string. The rendering of userInfo below uses nested template strings. Otherwise, when display is used and the image path is not passed in, there will be an undefined request


    return `<div class="luckysheet">
                    <canvas id="luckysheetTableContentF" style="display:none;" class="luckysheetTableContent"></canvas> 
                    <div class="luckysheet-work-area luckysheet-noselected-text"> 
                        <div id ="luckysheet_info_detail" class="luckysheet_info_detail"> 
                            <div data-tips="${locale_info.return}" id="luckysheet_info_detail_title" class="luckysheet_info_detail_back"> 
                                <i style="color:#444D5A;" class="fa fa-angle-left fa-2x" aria-hidden="true"></i> 
                            </div> 
                            <div class="luckysheet-share-logo" title="\${logotitle}"></div>
                            <div class="sheet-name"> 
                                <input data-tips="${locale_info.tips}" id="luckysheet_info_detail_input" class="luckysheet_info_detail_input luckysheet-mousedown-cancel" value="${locale_info.noName}" tabindex="0" dir="ltr" aria-label="${locale_info.rename}" style="visibility: visible; width: 149px;" data-tooltip="${locale_info.rename}"> 
                            </div> 
                            <div id="luckysheet_info_detail_update" class="luckysheet_info_detail_update"> ${locale_info.detailUpdate} </div> 
                            <div id="luckysheet_info_detail_save" class="luckysheet_info_detail_save"> ${locale_info.wait} </div>
                            
                            \${functionButton}
                            
                            ${getObjType(userInfo) === 'string' ? `<div class="luckysheet_info_detail_user">
                            <span id="luckysheet_info_detail_user">${userInfo}</span></div>` : ''}

                            ${getObjType(userInfo) === 'object' ? `<div class="luckysheet_info_detail_user">                            
                            <img src="${userInfo.userImage}" id="luckysheet_info_detail_user_img">
                            <span id="luckysheet_info_detail_user">${userInfo.userName}</span>
                            </div>` : ''}
                            
                        </div> 
                        <div id="luckysheet-wa-editor" class="luckysheet-wa-editor toolbar"> \${menu} </div> 
                        <div id="luckysheet-wa-calculate" class="luckysheet-wa-calculate"> 
                            <div class="luckysheet-wa-calculate-size" id="luckysheet-wa-calculate-size"></div> 
                            <div class="luckysheet-wa-calculate-help"> 
                                <div class="luckysheet-wa-calculate-help-box"> 
                                    <div spellcheck="false" aria-hidden="false" id="luckysheet-helpbox">
                                        <div id="luckysheet-helpbox-cell" class="luckysheet-helpbox-cell-input luckysheet-mousedown-cancel" tabindex="0" contenteditable="true" dir="ltr" aria-autocomplete="list"></div>
                                    </div> 
                                </div>  
                                <div class="luckysheet-wa-calculate-help-tool">
                                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                                </div> 
                            </div> 
                            <div id="luckysheet-wa-functionbox-cancel" class="luckysheet-wa-functionbox">
                                <span><i class="iconfont luckysheet-iconfont-qingchu" aria-hidden="true"></i></span>
                            </div> 
                            <div id="luckysheet-wa-functionbox-confirm" class="luckysheet-wa-functionbox">
                                <span><i class="iconfont luckysheet-iconfont-yunhang" aria-hidden="true"></i></span>
                            </div> 
                            <div id="luckysheet-wa-functionbox-fx" class="luckysheet-wa-functionbox">
                                <span><i class="iconfont luckysheet-iconfont-hanshu" aria-hidden="true" style="color:#333"></i></span> 
                            </div> 
                            <div id="luckysheet-functionbox-container" class="luckysheet-mousedown-cancel">
                                <div class="luckysheet-mousedown-cancel" dir="ltr">
                                    <div spellcheck="false" aria-hidden="false" id="luckysheet-functionbox">
                                        <div id="luckysheet-functionbox-cell" class="luckysheet-functionbox-cell-input luckysheet-mousedown-cancel" tabindex="0" contenteditable="true" dir="ltr" aria-autocomplete="list" aria-label="D4"></div>
                                    </div>
                                </div>
                            </div>   
                        </div> 
                    </div> 
                    <div class="luckysheet-grid-container luckysheet-scrollbars-enabled"> 
                        <div class="luckysheet-grid-window"> 
                            <div class="luckysheet-help-sub"></div> 
                            <div class="luckysheet-grid-window-1" id="luckysheet-grid-window-1">
                                <canvas id="luckysheetTableContent" class="luckysheetTableContent"></canvas> 
                                <table class="luckysheet-grid-window-2" cellspacing="0" cellpadding="0" dir="ltr" tabindex="-1" > 
                                    <tbody> 
                                        <tr> 
                                            <td valign="top" class="luckysheet-paneswrapper"> 
                                                <div class="luckysheet-left-top" id="luckysheet-left-top"> </div> 
                                            </td> 
                                            <td valign="top" class="luckysheet-paneswrapper"> 
                                                <div id="luckysheet-cols-h-c" class="luckysheet-cols-h-c">
                                                    <div class="luckysheet-cols-change-size" id="luckysheet-cols-change-size"></div>  
                                                    <div class="luckysheet-cols-menu-btn luckysheet-mousedown-cancel" style="line-height:0px;" id="luckysheet-cols-menu-btn"><i class="fa fa-caret-down luckysheet-mousedown-cancel" aria-hidden="true"></i></div>  
                                                    <div class="luckysheet-cols-h-hover" id="luckysheet-cols-h-hover"></div>  
                                                    <div id="luckysheet-cols-h-selected"></div>  
                                                    <div class="luckysheet-grdusedrange"></div>  
                                                    <div class="luckysheet-grdblkflowpush"></div>  \${columnHeader}
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td valign="top" class="luckysheet-paneswrapper"> 
                                                <div class="luckysheet-rows-h" id="luckysheet-rows-h"> 
                                                    <div class="luckysheet-rows-change-size" id="luckysheet-rows-change-size"></div> 
                                                    <div class="luckysheet-rows-h-hover" id="luckysheet-rows-h-hover"></div> 
                                                    <div id="luckysheet-rows-h-selected"></div>  
                                                    <div class="luckysheet-grdusedrange"></div>  
                                                    <div class="luckysheet-grdblkflowpush"></div> \${rowHeader}
                                                </div> 
                                            </td>  
                                            <td valign="top" class="luckysheet-paneswrapper">
                                                <div class="luckysheet-cell-loading" id="luckysheet-cell-loading">
                                                    <div class="luckysheet-cell-loading-inner">
                                                        <i class="fa fa-circle-o-notch fa-spin"></i>
                                                        <span></span>
                                                    </div>
                                                </div> 
                                                <div class="luckysheet-cell-freezen"></div> 
                                                <div class="luckysheet-scrollbars luckysheet-scrollbar-ltr luckysheet-scrollbar-x" id="luckysheet-scrollbar-x"><div></div></div> 
                                                <div class="luckysheet-scrollbars luckysheet-scrollbar-ltr luckysheet-scrollbar-y" id="luckysheet-scrollbar-y"><div></div></div> 
                                                <div class="luckysheet-cell-main " id="luckysheet-cell-main">
                                                    <div id="luckysheet-formula-functionrange"></div>  
                                                    <div id="luckysheet-formula-functionrange-select" class="luckysheet-selection-copy luckysheet-formula-functionrange-select">
                                                        <div class="luckysheet-selection-copy-top luckysheet-copy"></div>
                                                        <div class="luckysheet-selection-copy-right luckysheet-copy"></div>
                                                        <div class="luckysheet-selection-copy-bottom luckysheet-copy"></div>
                                                        <div class="luckysheet-selection-copy-left luckysheet-copy"></div>
                                                        <div class="luckysheet-selection-copy-hc"></div>
                                                    </div>  
                                                    <div class="luckysheet-row-count-show luckysheet-count-show" id="luckysheet-row-count-show"></div>
                                                    <div class="luckysheet-column-count-show luckysheet-count-show" id="luckysheet-column-count-show"></div>
                                                    <div class="luckysheet-change-size-line" id="luckysheet-change-size-line"></div>  
                                                    <div class="luckysheet-cell-selected-focus" id="luckysheet-cell-selected-focus"></div>  
                                                    <div id="luckysheet-selection-copy"></div>  
                                                    <div id="luckysheet-chart-rangeShow"></div>
                                                    <div class="luckysheet-cell-selected-extend" id="luckysheet-cell-selected-extend"></div>  
                                                    <div class="luckysheet-cell-selected-move" id="luckysheet-cell-selected-move"></div>  
                                                    <div id="luckysheet-cell-selected-boxs">
                                                        <div id="luckysheet-cell-selected" class="luckysheet-cell-selected">
                                                            <div class="luckysheet-cs-inner-border"></div>
                                                            <div class="luckysheet-cs-fillhandle"></div>
                                                            <div class="luckysheet-cs-inner-border"></div>
                                                            <div class="luckysheet-cs-draghandle-top luckysheet-cs-draghandle"></div>
                                                            <div class="luckysheet-cs-draghandle-bottom luckysheet-cs-draghandle"></div>
                                                            <div class="luckysheet-cs-draghandle-left luckysheet-cs-draghandle"></div>
                                                            <div class="luckysheet-cs-draghandle-right luckysheet-cs-draghandle"></div>
                                                            <div class="luckysheet-cs-touchhandle luckysheet-cs-touchhandle-lt"><div class="luckysheet-cs-touchhandle-btn"></div></div>
                                                            <div class="luckysheet-cs-touchhandle luckysheet-cs-touchhandle-rb"><div class="luckysheet-cs-touchhandle-btn"></div></div>
                                                        </div>
                                                    </div>
                                                    <div id="luckysheet-postil-showBoxs"></div>
                                                    <div id="luckysheet-multipleRange-show"></div>  
                                                    <div id="luckysheet-dynamicArray-hightShow"></div>  
                                                    <div id="luckysheet-image-showBoxs">
                                                        <div id="luckysheet-modal-dialog-activeImage" class="luckysheet-modal-dialog" style="display:none;padding:0;position:absolute;z-index:300;">
                                                            <div class="luckysheet-modal-dialog-border" style="position:absolute;"></div> 
                                                            <div class="luckysheet-modal-dialog-content"></div>  
                                                            <div class="luckysheet-modal-dialog-resize">
                                                                <svg class="luckysheet-modal-dialog-resize-item" id="rotateImg" style = 'position:absolute;left:50%;top:-40px;transform:translateX(-50%);height:15px;width:15px;padding:4px;cursor:pointer;' t="1711334629212" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4450" width="200" height="200"><path d="M148.361503 873.076215a33.27639 33.27639 0 0 1 0.204778-47.150084 33.583556 33.583556 0 0 1 47.354862 0.204778A444.316592 444.316592 0 0 0 511.944454 957.291078c104.436669 0 203.293143-35.938501 280.852728-99.317224l35.580139-32.81564a33.583556 33.583556 0 0 1 47.303668 1.791806 33.27639 33.27639 0 0 1-1.791806 47.09889l-37.064778 34.146695A511.176537 511.176537 0 0 1 511.944454 1023.99744a511.43251 511.43251 0 0 1-363.582951-150.921225z m863.49671-248.497838a33.481167 33.481167 0 0 1-65.426501-14.385639 443.139119 443.139119 0 0 0-299.129144-518.394954A33.327584 33.327584 0 1 1 667.575568 28.265477a509.58951 509.58951 0 0 1 344.180256 596.3129zM275.374922 138.640701a443.036731 443.036731 0 0 0-198.788032 467.456481 33.481167 33.481167 0 0 1-65.52889 13.771306A509.999065 509.999065 0 0 1 279.624061 59.596478C328.821923 31.439533 431.415591-4.191801 507.336954 0.620477c8.549472-1.689417 17.96925 0 25.597223 5.938555 6.4505 5.119445 9.982917 12.081889 11.109194 20.273001 0.255972 2.713306-0.409556 5.221833-1.023889 8.037528a22.832723 22.832723 0 0 1-7.781555 12.133083L341.262173 263.759926a28.208139 28.208139 0 0 1-29.999945 6.91125 30.204723 30.204723 0 0 1-20.836139-23.703028l-15.051167-108.378641z m-4.965861 785.322793c-2.969278-0.46075-7.269611 31.740556-34.402668 17.918056-48.225168-24.624528-138.225003-97.781391-174.93142-168.736892a31.331001 31.331001 0 0 1-8.037528-24.931695c1.023889-8.191111 5.221833-14.846389 11.62114-19.965834 2.201361-1.638222 4.658695-2.354944 7.423194-3.276444a22.832723 22.832723 0 0 1 14.385639 0.409555l285.7162 54.675668c10.392472 1.945389 18.839556 10.750834 21.399278 22.116a30.204723 30.204723 0 0 1-9.573361 30.102334l-113.651669 91.689252z m716.671041-436.688619c1.126278 2.815694 30.921445-10.085306 33.020417 20.273 3.737195 54.061334-12.542639 168.890475-54.522084 236.825504a31.331001 31.331001 0 0 1-17.201334 19.812251 29.999945 29.999945 0 0 1-23.139889 0.307167c-2.559722-1.023889-4.402722-2.815694-6.655278-4.709889a22.832723 22.832723 0 0 1-7.013639-12.54264l-100.341113-273.071171a28.208139 28.208139 0 0 1 7.986333-29.692779 30.204723 30.204723 0 0 1 30.716668-7.320805l137.149919 50.170556z" fill="#414F58" p-id="4451"></path></svg>
                                                                <div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-lt" data-type="lt"></div>
                                                                <div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-mt" data-type="mt"></div>
                                                                <div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-lm" data-type="lm"></div>
                                                                <div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-rm" data-type="rm"></div>
                                                                <div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-rt" data-type="rt"></div>
                                                                <div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-lb" data-type="lb"></div>
                                                                <div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-mb" data-type="mb"></div>
                                                                <div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-rb" data-type="rb"></div>
                                                            </div>

                                                        </div>
                                                        <div  id="imgControll" style="z-index:999;">
                                                            <!-- nby 放大图片 -->
                                                            <span class="luckysheet-modal-controll-btn luckysheet-modal-controll-amp" role="button" tabindex="0" aria-label="放大" title="放大">
                                                                <!-- <i class="iconfont luckysheet-iconfont-sousuo" aria-hidden="true"></i> -->
                                                                <svg style='height:17px;width:17px;position:relative;top:-1px;left:-1px;' t="1710739462422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4277" width="200" height="200"><path d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z" p-id="4278"></path><path d="M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z" p-id="4279"></path></svg>
                                                            </span>
                                                            <span class="luckysheet-modal-controll-btn luckysheet-modal-controll-cellImg" role="button" tabindex="0" aria-label="转为单元格图片" title="转为单元格图片">
                                                                <!-- <i class="iconfont luckysheet-iconfont-sousuo" aria-hidden="true"></i> -->
                                                                <svg style='height:17px;width:17px;position:relative;top:-1px;left:-1px;' t="1716425443403" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2849" width="200" height="200"><path d="M864 960h-704c-51.2 0-96-44.8-96-96v-704C64 108.8 108.8 64 160 64h704c51.2 0 96 44.8 96 96v704c0 51.2-44.8 96-96 96zM160 128c-19.2 0-32 12.8-32 32v704c0 19.2 12.8 32 32 32h704c19.2 0 32-12.8 32-32v-704c0-19.2-12.8-32-32-32h-704z" fill="#3D4757" p-id="2850"></path><path d="M128 320h768v64H128V320z" fill="#3D4757" p-id="2851"></path><path d="M940.8 755.2l-166.4-160c-12.8-12.8-32-12.8-44.8 0L576 748.8l-108.8-102.4c-12.8-12.8-32-12.8-44.8 0l-83.2 96 38.4 44.8L448 710.4 576 832l172.8-172.8 153.6 147.2 38.4-51.2zM576 576c38.4 0 64-25.6 64-64s-25.6-64-64-64-64 25.6-64 64 25.6 64 64 64z" fill="#3D4757" p-id="2852"></path><path d="M384 128v832H320V128h64z" fill="#3D4757" p-id="2853"></path></svg>
                                                            </span>
                                                            <span class="luckysheet-modal-controll-btn luckysheet-modal-controll-crop" role="button" tabindex="0" aria-label="裁剪" title="裁剪">
                                                                <!--<i class="fa fa-pencil" aria-hidden="true"></i>-->
                                                                <svg style='height:15px;width:15px;' t="1710739585658" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5307" width="200" height="200"><path d="M1000.97975 857.172771h-86.288076V149.975457l77.862189-77.835584-40.671223-40.67327-77.86526 77.863213H166.836439V23.013087H109.30935v86.317752H23.02025v57.497414H109.30935v747.86956h747.855234v86.290123h57.52709v-86.290123h86.288076v-57.525042zM816.493361 166.828253L166.836439 816.4995V166.828253h649.656922zM207.506639 857.172771l649.657945-649.643619v649.643619H207.506639z" fill="#000000" p-id="5308"></path></svg>
                                                            </span>
                                                            <!--<span class="luckysheet-modal-controll-btn luckysheet-modal-controll-restore" role="button" tabindex="0" aria-label="恢复原图" title="恢复原图">
                                                                <i class="fa fa-window-maximize" aria-hidden="true"></i>
                                                            </span>-->
                                                            <span class="luckysheet-modal-controll-btn luckysheet-modal-controll-del" role="button" tabindex="0" aria-label="删除" title="删除">
                                                                <!--<i class="fa fa-trash" aria-hidden="true"></i>-->
                                                                <svg style='height:15px;width:15px;' t="1710739643737" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6360" width="200" height="200"><path d="M991.50052 192.332986 831.667014 192.332986 831.667014 64.466181c0-35.163371-28.770031-63.933403-63.933403-63.933403L261.594173 0.532778c-35.163371 0-63.933403 28.770031-63.933403 63.933403l0 127.866805L32.49948 192.332986c-17.581686 0-31.966701 14.385016-31.966701 31.966701s14.385016 31.966701 31.966701 31.966701l229.094693 0 506.139438 0 223.766909 0c17.581686 0 31.966701-14.385016 31.966701-31.966701S1009.082206 192.332986 991.50052 192.332986zM261.700728 192.332986c0 0-0.106556-0.106556-0.106556-0.106556l0-127.653694c0 0 0.106556-0.106556 0.106556-0.106556l505.926327 0c0 0 0.106556 0.106556 0.106556 0.106556l0 127.653694c0 0-0.106556 0.106556-0.106556 0.106556L261.700728 192.332986zM863.633715 320.199792c-17.688241 0-31.966701 14.27846-31.966701 31.966701l0 575.400624c0 17.581686-14.385016 31.966701-31.966701 31.966701L224.299688 959.533819c-17.581686 0-31.966701-14.385016-31.966701-31.966701L192.332986 352.166493c0-17.688241-14.27846-31.966701-31.966701-31.966701s-31.966701 14.27846-31.966701 31.966701l0 575.400624c0 52.851613 43.048491 95.900104 95.900104 95.900104l575.400624 0c52.851613 0 95.900104-43.048491 95.900104-95.900104L895.600416 352.166493C895.600416 334.478252 881.321956 320.199792 863.633715 320.199792zM416.099896 799.700312 416.099896 352.166493c0-17.581686-14.385016-31.966701-31.966701-31.966701s-31.966701 14.385016-31.966701 31.966701l0 447.533819c0 17.581686 14.385016 31.966701 31.966701 31.966701S416.099896 817.281998 416.099896 799.700312zM671.833507 799.700312 671.833507 352.166493c0-17.581686-14.385016-31.966701-31.966701-31.966701s-31.966701 14.385016-31.966701 31.966701l0 447.533819c0 17.581686 14.385016 31.966701 31.966701 31.966701S671.833507 817.281998 671.833507 799.700312z" fill="#000000" p-id="6361"></path></svg>
                                                            </span>
                                                        </div>
                                                        <div id="luckysheet-modal-dialog-cropping" class="luckysheet-modal-dialog" style="display:none;padding:0;position:absolute;z-index:300;">
                                                            <div class="cropping-mask"></div>
                                                            <div class="cropping-content"></div>
                                                            <div class="luckysheet-modal-dialog-border" style="position:absolute;"></div>
                                                            <div class="luckysheet-modal-dialog-resize">
                                                                <div class="resize-item lt" data-type="lt"></div> 
                                                                <div class="resize-item mt" data-type="mt"></div> 
                                                                <div class="resize-item lm" data-type="lm"></div> 
                                                                <div class="resize-item rm" data-type="rm"></div> 
                                                                <div class="resize-item rt" data-type="rt"></div> 
                                                                <div class="resize-item lb" data-type="lb"></div> 
                                                                <div class="resize-item mb" data-type="mb"></div> 
                                                                <div class="resize-item rb" data-type="rb"></div>
                                                            </div>
                                                            <!-- 裁剪的操作<div class="luckysheet-modal-dialog-controll">
                                                                <span class="luckysheet-modal-controll-btn luckysheet-modal-controll-amp" role="button" tabindex="0" aria-label="放大" title="放大">
                                                                    <i class="iconfont luckysheet-iconfont-sousuo" aria-hidden="true"></i>
                                                                </span>
                                                                <span class="luckysheet-modal-controll-btn luckysheet-modal-controll-crop" role="button" tabindex="0" aria-label="裁剪" title="裁剪">
                                                                    <i class="fa fa-pencil" aria-hidden="true"></i>
                                                                </span>
                                                                <span class="luckysheet-modal-controll-btn luckysheet-modal-controll-restore" role="button" tabindex="0" aria-label="恢复原图" title="恢复原图">
                                                                    <i class="fa fa-window-maximize" aria-hidden="true"></i>
                                                                </span>
                                                                <span class="luckysheet-modal-controll-btn luckysheet-modal-controll-del" role="button" tabindex="0" aria-label="删除" title="删除">
                                                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                                                </span>
                                                            </div> -->
                                                        </div>
                                                        <div class="img-list"></div>
                                                        <div class="cell-date-picker">
                                                            <input id="cellDatePickerBtn" style="width:60px;" class="formulaInputFocus" readonly="readonly"/>
                                                        </div>
                                                    </div>
                                                    <div id="luckysheet-dataVerification-dropdown-btn"></div>
                                                    <div id="luckysheet-dataVerification-dropdown-List" class="luckysheet-mousedown-cancel"></div>
                                                    <div id="radioHtml" style="position:absolute;top:-2000px;left:0px;width:200px;height:200px;background:black;z-index:999999">
                                                        
                                                    </div>
                                                    <div id="luckysheet-dataVerification-showHintBox" class="luckysheet-mousedown-cancel"></div>
                                                    <div class="luckysheet-cell-copy"></div>  
                                                    <div class="luckysheet-grdblkflowpush"></div>  \${flow} 
                                                </div> 
                                            </td> 
                                        </tr> 
                                    </tbody> 
                                </table> 
                            </div> 
                            <div class="luckysheet-sheet-area luckysheet-noselected-text" id="luckysheet-sheet-area">
                                <div id="luckysheet-sheet-content">
                                    <div id="luckysheet-sheets-add" class="luckysheet-sheets-add lucky-button-custom"><i class="iconfont luckysheet-iconfont-jia1"></i></div>
                                    <div id="luckysheet-sheets-m" class="luckysheet-sheets-m lucky-button-custom"><i class="iconfont luckysheet-iconfont-caidan2"></i></div>
                                    <div class="luckysheet-sheet-container" id="luckysheet-sheet-container">
                                        <div class="docs-sheet-fade docs-sheet-fade-left" style="display: none;">
                                            <div class="docs-sheet-fade3"></div>
                                            <div class="docs-sheet-fade2"></div>
                                            <div class="docs-sheet-fade1"></div>
                                        </div>
                                        <div class="docs-sheet-fade docs-sheet-fade-right" style="display: none;">
                                            <div class="docs-sheet-fade1"></div>
                                            <div class="docs-sheet-fade2"></div>
                                            <div class="docs-sheet-fade3"></div>
                                        </div>
                                        <div class="luckysheet-sheet-container-c" id="luckysheet-sheet-container-c"></div>
                                    </div>
                                    <div id="fileNameContent" style="display:none;padding:4px 10px;text-align: center;margin-left: auto;background:#42B983;color:white;border-radius:5px;"></div>
                                    <div id="luckysheet-sheets-leftscroll" class="luckysheet-sheets-scroll lucky-button-custom"><i class="fa fa-caret-left"></i></div>
                                    <div id="luckysheet-sheets-rightscroll" class="luckysheet-sheets-scroll lucky-button-custom"><i class="fa fa-caret-right"></i></div>
                                </div>
                            </div> 
                        </div> 
                        <div class="luckysheet-stat-area"> 
                            <div class="luckysheet-sta-c">
                                <div class="luckysheet-zoom-content" id="luckysheet-zoom-content">
                                    <div class="luckysheet-zoom-minus" id="luckysheet-zoom-minus">
                                        <div class="luckysheet-zoom-minus-icon"></div>
                                    </div>
                                    <div class="luckysheet-zoom-slider" id="luckysheet-zoom-slider">
                                        <div class="luckysheet-zoom-line"></div>
                                        <div class="luckysheet-zoom-cursor" id="luckysheet-zoom-cursor"></div>
                                        <div class="luckysheet-zoom-hundred"></div>
                                    </div>
                                    <div class="luckysheet-zoom-plus" id="luckysheet-zoom-plus">
                                        <div class="luckysheet-zoom-plus-icon"></div>
                                    </div>
                                    <div class="luckysheet-zoom-ratioText" id="luckysheet-zoom-ratioText">100%</div>
                                </div>
                                <div class="luckysheet-print-viewList">
                                    <div type="viewNormal" class="luckysheet-print-viewBtn luckysheet-print-viewNormal luckysheet-print-viewBtn-active" title="${locale_print.normalBtn}"><i class="icon iconfont luckysheet-iconfont-putong"></i></div>
                                    <div type="viewLayout" class="luckysheet-print-viewBtn luckysheet-print-viewLayout" title="${locale_print.layoutBtn}"><i class="icon iconfont luckysheet-iconfont-yemianbuju"></i></div>
                                    <div type="viewPage" class="luckysheet-print-viewBtn luckysheet-print-viewPage" title="${locale_print.pageBtn}"><i class="icon iconfont luckysheet-iconfont-fenyeyulan"></i></div>
                                </div>
                                <div class="luckysheet-sta-content" id="luckysheet-sta-content"></div>  
                                <!--<div class="luckysheet-bottom-content" id="luckysheet-bottom-content-show"></div> -->
                            </div> 
                        </div> 
                    </div>
                    <div id="luckysheet-copy-content" contenteditable="true"></div>
                    <input id="luckysheet-copy-btn" type="button" data-clipboard-target="luckysheet-copy-content">
                    <div id="testdpidiv" style="height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;"></div>
                  </div>`;
}

const columeHeader_word = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
    columeHeader_word_index = { 'A': 0, 'B': 1, 'C': 2, 'D': 3, 'E': 4, 'F': 5, 'G': 6, 'H': 7, 'I': 8, 'J': 9, 'K': 10, 'L': 11, 'M': 12, 'N': 13, 'O': 14, 'P': 15, 'Q': 16, 'R': 17, 'S': 18, 'T': 19, 'U': 20, 'V': 21, 'W': 22, 'X': 23, 'Y': 24, 'Z': 25 },
    flow = '<div id="luckysheet-cell-flow_${index}" class="luckysheet-cell-flow luckysheetsheetchange" style="width:${width}px;"><div class="luckysheet-cell-flow-clip"><div class="luckysheet-grdblkpush"></div>${flow}</div></div>',
    colsmenuHTML = '';

//右键菜单dom
function rightclickHTML(){
    const _locale = locale();
    const rightclick = _locale.rightclick;
    const toolbar = _locale.toolbar;

    const config = customCellRightClickConfig();

    // 当一个功能菜单块内所有的按钮都隐藏的时候，它顶部的分割线也需要隐藏掉
    let handleincellMenuseparator = true;

    if(!config.insertRow && !config.insertColumn && !config.deleteRow && !config.deleteColumn && !config.deleteCell ){
        handleincellMenuseparator = false;
    }

    let dataMenuseparator = true;

    if(!config.clear && !config.matrix && !config.sort && !config.filter && !config.chart && !config.image && !config.link && !config.data && !config.cellFormat){
        dataMenuseparator = false;
    }

    const customsButtons = (config.customs || []).map((item, index) => `
            <div data-index="${index}" class="luckysheetColsRowsHandleAdd_custom luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                ${item.title}
                </div>
            </div>`
        ).join("");
    // <div id="luckysheet-rightclick-menu" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-mousedown-cancel">
    //     <div  class="luckysheet-cols-menuitem luckysheet-mousedown-cancel "  style="display:${config.indicator ? 'block' : 'none'};">
    //     <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.indicator}</div>
    // </div>
    // <div style="width:100%;height:20px;"><div id="closeRightMenu" style="float:right;cursor:pointer;width:20px;height:20px;line-height:20px">&#10005;</div></div>
    const rightclickContainer =  `

            <div id="luckysheet-rightclick-menu" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-mousedown-cancel" style='overflow-y:scroll;' >
                <!-- 调整行或列 -->
                
                <div  class="luckysheet-cols-menuitem luckysheet-mousedown-cancel " 
                style="display:${config.adjustRowOrColumn ? 'block' : 'none'};">
                    <div id='adjustRowOrColumn' style='display:none' class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">此行后面删除</div>
                </div>

                <div id="indicatorBtn" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel " 
                style="display:${config.indicator ? 'block' : 'none'};">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.indicator}</div>
                </div>
                <div id="cancelIndicatorBtn" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel " 
                style="display:${config.cancelIndicator ? 'block' : 'none'};">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.cancelIndicator}</div>
                </div>
                <div id="luckysheet-copy-btn" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel luckysheet-copy-btn" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" style="display:${config.copy ? 'block' : 'none'};">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.copy}</div>
                    </div>
                <div id="luckysheetcopyfor" class="luckysheet-cols-menuitem luckysheet-cols-submenu luckysheet-mousedown-cancel"  style="display:${config.copyAs ? 'block' : 'none'};">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.copyAs}<span class="luckysheet-submenu-arrow iconfont luckysheet-iconfont-youjiantou" style="user-select: none;"></span>
                    </div>
                </div>
                <div id="luckysheet-copy-paste" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.paste ? 'block' : 'none'};">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.paste}</div>
                </div>`
                +`${config.pasteNum ? `<div id="luckysheet-paste-num" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.pasteNum ? 'block' : 'none'};">
                <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">仅粘贴数值</div>
                </div>`:''}`
                +
                `${Store.isShowPasteText?`<div id="luckysheet-paste-text" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${Store.isShowPasteText ? 'block' : 'none'};">
                <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${Store.pasteText?`关闭纯文本粘贴`:`开启纯文本粘贴`}</div>
                </div>`:''}`
                +
                `<div id="luckysheet-insert-img" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.insertCellImg ? 'block' : 'none'};">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">插入单元格图片</div>
                </div>`
                +
                `<div id="luckysheet-cols-rows-handleincell">
                    <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator" style="display:${handleincellMenuseparator ? 'block' : 'none'};"></div>
                    <div id="luckysheetColsRowsHandleAdd_row" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.insertRow ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${rightclick.insert}${rightclick.row}<span class="luckysheet-submenu-arrow" style="user-select: none;"></span>
                        </div>
                    </div>
                    <div id="luckysheetColsRowsHandleAdd_column" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.insertColumn ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${rightclick.insert}${rightclick.column}<span class="luckysheet-submenu-arrow" style="user-select: none;"></span>
                        </div>
                    </div>
                    <!-- nby 复制并插入行-->
                    <div id="luckysheetColsRowsHandleAdd_copy_row" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.insertRowCopy ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${'复制并'}${rightclick.insert}${rightclick.row}<span class="luckysheet-submenu-arrow" style="user-select: none;"></span>
                        </div>
                    </div>
                    <div id="luckysheetColsRowsHandleAdd_copy_column" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.insertColumnCopy ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${'复制并'}${rightclick.insert}${rightclick.column}<span class="luckysheet-submenu-arrow" style="user-select: none;"></span>
                        </div>
                    </div>
                    <!-- nby 复制并插入行 END-->
                    <div id="luckysheet-delRows" class="luckysheet-cols-menuitem luckysheet-cols-submenu luckysheet-mousedown-cancel" style="display:${config.deleteRow ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.deleteSelected}${rightclick.row}<span class="luckysheet-submenu-arrow" style="user-select: none;"></span>
                        </div>
                    </div>
                    <div id="luckysheet-delCols" class="luckysheet-cols-menuitem luckysheet-cols-submenu luckysheet-mousedown-cancel" style="display:${config.deleteColumn ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.deleteSelected}${rightclick.column}<span class="luckysheet-submenu-arrow" style="user-select: none;"></span>
                        </div>
                    </div>
                    <!-- cell right click remove hide button
                    <div id="luckysheetColsRowsHandleHid" class="luckysheet-cols-menuitem luckysheet-cols-submenu luckysheet-mousedown-cancel">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${rightclick.hide}<span class="luckysheet-submenu-arrow iconfont luckysheet-iconfont-youjiantou" style="user-select: none;"></span>
                        </div>
                    </div>
                    -->
                    <div id="luckysheetCellsHandleDel" class="luckysheet-cols-menuitem luckysheet-cols-submenu luckysheet-mousedown-cancel" style="display:${config.deleteCell ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${rightclick.deleteCell}<span class="luckysheet-submenu-arrow iconfont luckysheet-iconfont-youjiantou" style="user-select: none;"></span>
                        </div>
                    </div>
                    <!-- nby 单元格右键 显示带input框的插入行  -->
                    <div id="luckysheet-top-left-add-selected-cell" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${rightclick.to}
                            <span class="luckysheet-cols-rows-shift-left">${rightclick.top}</span>
                            ${rightclick.add}
                            <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align:center;margin-left:5px;"/>
                            <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">行</span>
                        </div>
                    </div>
                    <div id="luckysheet-bottom-right-add-selected-cell" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${rightclick.to}
                            <span class="luckysheet-cols-rows-shift-right">${rightclick.bottom}</span>
                            ${rightclick.add}
                            <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;margin-left:5px;"/>
                            <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">行</span>
                        </div>
                    </div>
                    <!-- nby 单元格右键 显示带input框的插入行  -->
                </div>
                <div id="luckysheet-cols-rows-add">
                    <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div>
                    <!-- nby 复制并插入列 -->
                    <div id="luckysheet-top-left-add-selected-copy" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${'复制并'}${rightclick.to}
                            <span class="luckysheet-cols-rows-shift-left">${rightclick.left}</span>
                            ${rightclick.add}
                            <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align:center;margin-left:5px;display:none"/>
                            <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
                        </div>
                    </div>
                   <!-- <div id="luckysheet-bottom-right-add-selected-copy" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${'复制并'}${rightclick.to}
                            <span class="luckysheet-cols-rows-shift-right">${rightclick.right}</span>
                            ${rightclick.add}
                            <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;margin-left:5px;display:none"/>
                            <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
                        </div>
                    </div>-->
                    <!-- nby 复制并插入列 END -->
                    <div id="luckysheet-top-left-add-selected" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${rightclick.to}
                            <span class="luckysheet-cols-rows-shift-left">${rightclick.left}</span>
                            ${rightclick.add}
                            <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align:center;margin-left:5px;"/>
                            <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
                        </div>
                    </div>
                    <div id="luckysheet-bottom-right-add-selected" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${rightclick.to}
                            <span class="luckysheet-cols-rows-shift-right">${rightclick.right}</span>
                            ${rightclick.add}
                            <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;margin-left:5px;"/>
                            <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
                        </div>
                    </div>
                    <div id="luckysheet-del-selected" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${rightclick.deleteSelected}
                            <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
                        </div>
                    </div>
                    <div id="luckysheet-hide-selected" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.hideSelected}
                        <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
                        </div>
                    </div>
                    <div id="luckysheet-show-selected" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${rightclick.showHide}
                            <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
                        </div>
                    </div>
                    <div id="luckysheet-column-row-width-selected" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            <span class="luckysheet-cols-rows-shift-word luckysheet-mousedown-cancel">${rightclick.column}</span>
                            <span class="luckysheet-cols-rows-shift-size luckysheet-mousedown-cancel">${rightclick.width}</span>
                            <input type="number" class="luckysheet-mousedown-cancel rcsize" min="0" max="255" placeholder="${rightclick.number}" value="" style="width:50px;height:20px;box-sizing:border-box;text-align: center;margin-left:5px;">
                            px
                        </div>
                    </div>
                </div>
                <div id="luckysheet-cols-rows-shift">
                    <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator" style="display:${config.sort ? 'block' : 'none'};"></div>
                    <div id="luckysheetorderbyasc" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.sort ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.orderAZ}</div>
                    </div>
                    <div id="luckysheetorderbydesc" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.sort ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.orderZA}</div>
                    </div>
                </div>
                <div id="luckysheet-cols-rows-data">
                    <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator" style="display:${dataMenuseparator ? 'block' : 'none'};"></div>
                    <div id="luckysheet-delete-text" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.clear ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.clearContent}</div>
                    </div>
                    <div id="luckysheetmatrix" class="luckysheet-cols-menuitem luckysheet-cols-submenu luckysheet-mousedown-cancel" style="display:${config.matrix ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${rightclick.matrix}<span class="luckysheet-submenu-arrow iconfont luckysheet-iconfont-youjiantou" style="user-select: none;"></span>
                        </div>
                    </div>
                    <div id="luckysheetorderby" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.sort ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.sortSelection}</div>
                    </div>
                    <div id="luckysheetfilter" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.filter ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.filterSelection}</div>
                    </div>
                    <div id="luckysheetdatavisual" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.chart ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.chartGeneration}</div>
                    </div>
                    <div id="luckysheetInsertImage" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.image ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${toolbar.insertImage}</div>
                    </div>
                    <div id="luckysheetInsertLink" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.link ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${toolbar.insertLink}</div>
                    </div>
                    <div id="luckysheetDataVerification" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.data ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${toolbar.dataVerification}</div>
                    </div>
                    <div id="luckysheetCellFormatRightClickMenu" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.cellFormat ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${toolbar.cellFormat}</div>
                    </div>
                    <!-- nby 23-11-1 直接修改单元格json -->
                    <div id="luckysheetCellChangeJson" class="luckysheet-cols-menuitem luckysheet-cols-submenu luckysheet-mousedown-cancel" style="display:${config.source ? 'block' : 'none'};">
                        <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                            ${'源数据'}<span class="luckysheet-submenu-arrow iconfont luckysheet-iconfont-youjiantou" style="user-select: none;"></span>
                        </div>
                    </div>
                    ${customsButtons}
                </div>
            </div>
            <div id="luckysheetCellChangeJson_sub" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-rightgclick-menu-sub luckysheet-mousedown-cancel">
                <div id="luckysheet-changeJson" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${'显示json'}
                    </div>
                </div>

            </div>
            <div id="luckysheetcopyfor_sub" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-rightgclick-menu-sub luckysheet-mousedown-cancel">
                <div id="luckysheet-copy-json-head" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">Json ${rightclick.firstLineTitle}</div>
                </div>
                <div id="luckysheet-copy-json-nohead" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">Json ${rightclick.untitled}</div>
                </div>
                <div id="luckysheet-copy-array1" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.array1}</div>
                </div>
                <div id="luckysheet-copy-array2" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.array2}</div>
                </div>
                <div id="luckysheet-copy-arraymore-confirm" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        <span class="luckysheet-mousedown-cancel">${rightclick.array3}</span>
                        <input type="number" id="luckysheet-copy-arraymore-row" min="1" class="luckysheet-mousedown-cancel" placeholder="${rightclick.row}" style="width:40px;height:20px;box-sizing:border-box;text-align: center;"/>
                            ×
                            <input type="number" id="luckysheet-copy-arraymore-col" min="1" class="luckysheet-mousedown-cancel" placeholder="${rightclick.column}" style="width:40px;height:20px;box-sizing:border-box;text-align: center;"/>
                    </div>
                </div>
                <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div>
                <div id="luckysheet-copy-diagonal" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.diagonal}</div>
                </div>
                <div id="luckysheet-copy-antidiagonal" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.antiDiagonal}</div>
                </div>
                <div id="luckysheet-copy-diagonaloffset" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.diagonalOffset}
                        <input type="number" id="luckysheet-copy-diagonaloffset-value" class="luckysheet-mousedown-cancel" placeholder="${rightclick.offset}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;margin-left:5px;"/>
                        ${rightclick.column}
                    </div>
                </div>
                <div id="luckysheet-copy-boolvalue" data-clipboard-action="copy" data-clipboard-target="#luckysheet-copy-content" class="luckysheet-cols-menuitem luckysheet-copy-btn luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.boolean}</div>
                </div>
            </div>
            
            <!-- Revision: modeled on google sheet
            
            <div id="luckysheetColsRowsHandleAdd_sub" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-rightgclick-menu-sub luckysheet-mousedown-cancel">
                <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.to}${rightclick.top}${rightclick.add}
                        <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;margin-left:5px;"/>
                        <span class="luckysheet-mousedown-cancel">${rightclick.row}</span>
                    </div>
                </div>
                <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.to}${rightclick.bottom}${rightclick.add}
                        <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;margin-left:5px;"/>
                        <span class="luckysheet-mousedown-cancel">${rightclick.row}</span>
                    </div>
                </div>
                <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.to}${rightclick.left}${rightclick.add}
                        <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;margin-left:5px;"/>
                        <span class="luckysheet-mousedown-cancel">${rightclick.column}</span>
                    </div>
                </div>
                <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.to}${rightclick.right}${rightclick.add}
                        <input type="text" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="1" style="width:40px;height:20px;box-sizing:border-box;text-align: center;margin-left:5px;"/>
                        <span class="luckysheet-mousedown-cancel">${rightclick.column}</span>
                    </div>
                </div>
            </div>
            
            -->

            <!-- delete row or column
            
            <div id="luckysheetColsRowsHandleDel_sub" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-rightgclick-menu-sub luckysheet-mousedown-cancel">
                <div id="luckysheet-delRows" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.deleteSelected}${rightclick.row}
                    </div>
                </div>
                <div id="luckysheet-delCols" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.deleteSelected}${rightclick.column}
                    </div>
                </div>
            </div>
            
            -->

            <!--
            <div id="luckysheetColsRowsHandleHid_sub" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-rightgclick-menu-sub luckysheet-mousedown-cancel">
                <div id="luckysheet-hidRows" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.hideSelected}${rightclick.row}
                    </div>
                </div>
                <div id="luckysheet-showHidRows" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.showHide}${rightclick.row}
                    </div>
                </div>
                <div id="luckysheet-hidCols" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.hideSelected}${rightclick.column}
                    </div>
                </div>
                <div id="luckysheet-showHidCols" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.showHide}${rightclick.column}
                    </div>
                </div>
            </div>

            -->

            <div id="luckysheetCellsHandleDel_sub" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-rightgclick-menu-sub luckysheet-mousedown-cancel">
                <div id="luckysheet-delCellsMoveLeft" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.moveLeft}
                    </div>
                </div>
                <div id="luckysheet-delCellsMoveUp" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.moveUp}
                    </div>
                </div>
            </div>
            <div id="luckysheetmatrix_sub" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-rightgclick-menu-sub luckysheet-mousedown-cancel">
                <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.flip}
                        <button id="luckysheet-matrix-turn-up" class="btn btn-primary luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.upAndDown}</button>
                        <button id="luckysheet-matrix-turn-left" class="btn btn-primary luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.leftAndRight}</button>
                    </div>
                </div>
                <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.flip}
                        <button id="luckysheet-matrix-turn-cw" class="btn btn-primary luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.clockwise}</button>
                        <button id="luckysheet-matrix-turn-anticw" class="btn btn-primary luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.counterclockwise}</button>
                    </div>
                </div>
                <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div id="luckysheet-matrix-turn-trans" class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${rightclick.transpose}</div>
                </div>
                <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div>
                <div id="luckysheet-matrix-cal-confirm" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        <div class="luckysheet-mousedown-cancel">${rightclick.matrixCalculation}</div>
                        <div class="luckysheet-mousedown-cancel">
                            <select id="luckysheet-matrix-cal-type" class="luckysheet-mousedown-cancel" style="height:20px;">
                                <option value="plus">${rightclick.plus}</option>
                                <option value="minus">${rightclick.minus}</option>
                                <option value="multiply">${rightclick.multiply}</option>
                                <option value="divided">${rightclick.divided}</option>
                                <option value="power">${rightclick.power}</option>
                                <option value="root">${rightclick.root}</option>
                                <option value="log">${rightclick.log}</option>
                            </select>
                            <input type="number" id="luckysheet-matrix-cal-value" class="luckysheet-mousedown-cancel" placeholder="${rightclick.number}" value="2" style="width:40px;height:20px;box-sizing:border-box;text-align: center;margin-left:5px;"/>
                        </div>
                    </div>
                </div>
                <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.delete0}
                        <button id="luckysheet-matrix-delezero-row" class="btn btn-primary luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.byRow}</button>
                        <button id="luckysheet-matrix-delezero-column" class="btn btn-primary luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.byCol}</button>
                    </div>
                </div>
                <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                        ${rightclick.removeDuplicate}
                        <button id="luckysheet-matrix-delerpt-row" class="btn btn-primary luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.byRow}</button>
                        <button id="luckysheet-matrix-delerpt-column" class="btn btn-primary luckysheet-mousedown-cancel" style="margin-left:5px;padding:2px 3px;line-height:12px;font-size:12px;">${rightclick.byCol}</button>
                    </div>
                </div>
            </div>`;

            return rightclickContainer;
}

const pivottableconfigHTML = function(){
    const _locale = locale();
    const locale_pivotTable = _locale.pivotTable;

    return '<div class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-mousedown-cancel" id="luckysheet-pivotTable-config-option"> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <div class="luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.titleSort+'</span> <select class="luckysheet-mousedown-cancel" style="height:24px;" id="luckysheet-pivotTable-config-option-order"> <option selected="selected" value="default">'+locale_pivotTable.titleNoSort+'</option> <option value="asc">'+locale_pivotTable.titleSortAsc+'</option> <option value="desc">'+locale_pivotTable.titleSortDesc+'</option> </select> </div> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <div class="luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.titleSortBy+'</span> <select class="luckysheet-mousedown-cancel" style="height:24px;" id="luckysheet-pivotTable-config-option-orderby"> </select> </div> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <div class="luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.titleShowSum+'</span> <select class="luckysheet-mousedown-cancel" style="height:24px;" id="luckysheet-pivotTable-config-option-stastic"> <option  value="0">'+locale_pivotTable.titleStasticFalse+'</option> <option value="1" selected="selected">'+locale_pivotTable.titleStasticTrue+'</option> </select> </div> </div> </div> </div>';
} 

const pivottablesumHTML = function(){
    const _locale = locale();
    const locale_pivotTable = _locale.pivotTable;

    return '<div class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-mousedown-cancel" id="luckysheet-pivotTable-config-option-sumtype"> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="SUM"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticsSUM+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="COUNT"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticsCOUNT+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="COUNTA"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticsCOUNTA+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="COUNTUNIQUE"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticsCOUNTUNIQUE+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="AVERAGE"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticsAVERAGE+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="MAX"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticsMAX+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="MIN"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticsMIN+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="MEDIAN"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticsMEDIAN+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="PRODUCT"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticsPRODUCT+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="STDEV"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticsSTDEV+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="STDEVP"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticsSTDEVP+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="VAR"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticslet+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" sumtype="VARP"> <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> <span class="luckysheet-mousedown-cancel">'+locale_pivotTable.valueStatisticsVARP+'</span> <span class="luckysheet-submenu-arrow luckysheet-mousedown-cancel" style="user-select: none;"><i class="fa fa-check luckysheet-mousedown-cancel" aria-hidden="true"></i></span> </div> </div> </div>';
} 

const sheetHTML = '<div style="${style}" id="luckysheet-sheets-item${index}" data-index="${index}" class="luckysheet-sheets-item ${active}"><span class="luckysheet-sheets-item-name" spellcheck ="false" contenteditable="false">${name}</span> <span class="luckysheet-sheets-item-menu luckysheet-mousedown-cancel"><i class="fa fa-sort-desc luckysheet-mousedown-cancel"></i></span>${colorset}</div>',
    columnHeaderHTML = '<div class="luckysheet-cols-h-cells luckysheetsheetchange"  id="luckysheet-cols-h-cells_${index}" style="width:${width}px;"> <div class="luckysheet-cols-h-cells-c"> <div class="luckysheet-grdblkpush"></div>${column}</div></div>',
    sheetselectlistHTML = '<div class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-mousedown-cancel" id="luckysheet-sheet-list">${item}</div>',
    sheetselectlistitemHTML = '<div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"  id="luckysheet-sheet-btn${index}" data-index="${index}"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel" style="${style}" ><span class="icon luckysheet-mousedown-cancel">${icon}</span>${name}</div></div>',
    inputHTML = '<div dir="ltr"><div class="luckysheet-input-box-index" id="luckysheet-input-box-index"></div><div id="luckysheet-input-box" spellcheck="false" aria-hidden="false" class="luckysheet-input-box"><div class="luckysheet-cell-input editable" tabindex="0" role="combobox" contenteditable="true" id="luckysheet-rich-text-editor" dir="ltr" g_editable="true" aria-autocomplete="list"></div></div></div>',
    modelHTML = '<div id="${id}" style="${style}" class="luckysheet-modal-dialog ${addclass}" tabindex="0" role="dialog" aria-labelledby=":41e" dir="ltr"> <div class="luckysheet-modal-dialog-title luckysheet-modal-dialog-title-draggable"> <span class="luckysheet-modal-dialog-title-text" role="heading">${title}</span>	 <span class="luckysheet-modal-dialog-title-close" role="button" tabindex="0" aria-label="${close}"><svg style="width:30px;height:30px;" t="1719710964967" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4281" width="200" height="200"><path d="M512 466.944l233.472-233.472a31.744 31.744 0 0 1 45.056 45.056L557.056 512l233.472 233.472a31.744 31.744 0 0 1-45.056 45.056L512 557.056l-233.472 233.472a31.744 31.744 0 0 1-45.056-45.056L466.944 512 233.472 278.528a31.744 31.744 0 0 1 45.056-45.056z" fill="#5A5A68" p-id="4282"></path></svg></span> </div> <div class="luckysheet-modal-dialog-content">${content}</div> <div class="luckysheet-modal-dialog-buttons">	 ${botton} </div></div>',

    maskHTML = '<div class="luckysheet-modal-dialog-mask" id="luckysheet-modal-dialog-mask"></div>';
    // radioHtml = `<div id="radioHtml" style="position:absolute;top:-2000px;left:0px;width:200px;height:200px;background:black;z-index:999999"></div>`,

//底部 表格标签操作dom
function sheetconfigHTML(){
    const sheetconfig = locale().sheetconfig;

    const config = customSheetRightClickConfig();

    /* 如果配置项全部为flase，则隐藏入口且不再菜单项 */
    if(Object.values(config).every(ele=> !ele)){
        $('#luckysheet-sheet-container-c').addClass("luckysheet-sheet-container-menu-hide");
        return "";
    }

    let hideTopMenuseparator = true;
    let moveTopMenuseparator = true;

    // 1. 当一个功能菜单块上方的功能块按钮都隐藏的时候，下方的功能块的顶部分割线也需要隐藏
    if(!config.delete && !config.copy && !config.rename && !config.color){
        hideTopMenuseparator = false;
        if(!config.hide){
            moveTopMenuseparator = false;
        }
    }

    // 2. 当一个功能菜单块内所有的按钮都隐藏的时候，它顶部的分割线也需要隐藏掉
    if(!config.hide){
        hideTopMenuseparator = false;
    }
    if(!config.move){
        moveTopMenuseparator = false;
    }


    const sheetconfigModel = `<div id="luckysheet-rightclick-sheet-menu" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-mousedown-cancel"> 
                <div id="luckysheetsheetconfigdelete" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.delete ? 'block' : 'none'};"> 
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${sheetconfig.delete}</div>
                </div> 
                <div id="luckysheetsheetconfigcopy" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.copy ? 'block' : 'none'};"> 
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${sheetconfig.copy}</div> 
                </div> 
                <div id="luckysheetsheetconfigrename" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.rename ? 'block' : 'none'};"> 
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${sheetconfig.rename}</div> 
                </div> 
                <div id="luckysheetsheetconfigcolor" class="luckysheet-cols-menuitem luckysheet-cols-submenu luckysheet-mousedown-cancel" style="display:${config.color ? 'block' : 'none'};"> 
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"> 
                        ${sheetconfig.changeColor} <span class="luckysheet-submenu-arrow iconfont luckysheet-iconfont-youjiantou" style="user-select: none;"></span> 
                    </div> 
                </div> 
                <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator" style="display:${hideTopMenuseparator ? 'block' : 'none'};"></div> 
                <div id="luckysheetsheetconfighide" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.hide ? 'block' : 'none'};"> 
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${sheetconfig.hide}</div> 
                </div> 
                <div id="luckysheetsheetconfigshow" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.hide ? 'block' : 'none'};"> 
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${sheetconfig.unhide}</div> 
                </div> 
                <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator" style="display:${moveTopMenuseparator ? 'block' : 'none'};"></div> 
                <div id="luckysheetsheetconfigmoveleft" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.move ? 'block' : 'none'};"> 
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${sheetconfig.moveLeft}</div> 
                </div> 
                <div id="luckysheetsheetconfigmoveright" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" style="display:${config.move ? 'block' : 'none'};"> 
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${sheetconfig.moveRight}</div> 
                </div> 
            </div> 
            <div id="luckysheetsheetconfigcolor_sub" class="luckysheet-cols-menu luckysheet-rightgclick-menu luckysheet-rightgclick-menu-sub luckysheet-mousedown-cancel">
                <div id="luckysheetsheetconfigcolorreset" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${sheetconfig.resetColor}</div>
                </div> 
                <div class="luckysheet-mousedown-cancel"> 
                    <div class="luckysheet-mousedown-cancel"> 
                        <input type="text" id="luckysheetsheetconfigcolorur" /> 
                    </div> 
                </div> 
            </div>`;

            return sheetconfigModel;
}

const luckysheetPivotTableHTML = function(){
    const _locale = locale();
    const locale_pivotTable = _locale.pivotTable;
    // return '<div id="luckysheet-modal-dialog-slider-pivot" class="luckysheet-modal-dialog-slider luckysheet-modal-dialog-slider-pivot"> <div class="luckysheet-modal-dialog-slider-title"> <span>'+locale_pivotTable.title+'</span> <span id="luckysheet-modal-dialog-slider-close" title="'+locale_pivotTable.closePannel+'"><i class="fa fa-times" aria-hidden="true"></i></span> </div> <div class="luckysheet-modal-dialog-slider-content"> <div class="luckysheet-modal-dialog-slider-range"> <div id="luckysheet-dialog-pivotTable-range"></div> <div id="luckysheet-dialog-pivotTable-range-seleted">'+locale_pivotTable.editRange+'</div> </div> <div class="luckysheet-modal-dialog-slider-list-title"> '+locale_pivotTable.tipPivotFieldSelected+' <span title="'+locale_pivotTable.tipClearSelectedField+'" id="luckysheet-dialog-pivotTable-clearitem">'+locale_pivotTable.btnClearSelectedField+'</span></div> <div id="luckysheet-modal-dialog-pivotTable-list" class="luckysheet-modal-dialog-slider-list luckysheet-scrollbars"> </div> <div class="luckysheet-modal-dialog-slider-config-c"> <div class="luckysheet-modal-dialog-slider-config luckysheet-modal-dialog-config-filter"> <div> <span><i class="fa fa-filter luckysheet-mousedown-cancel" aria-hidden="true"></i> '+locale_pivotTable.btnFilter+'</span> </div> <div id="luckysheet-modal-dialog-config-filter" class="luckysheet-modal-dialog-slider-config-list luckysheet-scrollbars"> </div> </div> <div class="luckysheet-modal-dialog-slider-config luckysheet-modal-dialog-config-row"> <div> <span><i class="fa fa-list-alt" aria-hidden="true"></i> '+locale_pivotTable.titleRow+'</span> </div> <div id="luckysheet-modal-dialog-config-row" class="luckysheet-modal-dialog-slider-config-list luckysheet-scrollbars"> </div> </div> <div class="luckysheet-modal-dialog-slider-config luckysheet-modal-dialog-config-column"> <div> <span><i class="fa fa-indent" aria-hidden="true"></i> '+locale_pivotTable.titleColumn+'</span> </div> <div id="luckysheet-modal-dialog-config-column" class="luckysheet-modal-dialog-slider-config-list luckysheet-scrollbars"> </div> </div> <div class="luckysheet-modal-dialog-slider-config luckysheet-modal-dialog-config-value"> <div> <span><i class="fa fa-cube" aria-hidden="true"></i> '+locale_pivotTable.titleValue+'</span> <span style="float: right;margin-right: 10px;display:none;" id="luckysheetpivottablevaluecolrowshow"><label style="padding:0px 5px;margin:0px;font-size:12px;height:15px;line-height:15px;" title="'+locale_pivotTable.tipShowColumn+'" for="luckysheetpivottablevaluecolrow">'+locale_pivotTable.titleColumn+'</label> <input type="radio" checked="checked" value="1" name="luckysheetpivottablevaluecolrow" id="luckysheetpivottablevaluecolrow" /> <label style="padding:0px 5px;margin:0px;font-size:12px;height:15px;line-height:15px;" title="'+locale_pivotTable.tipShowRow+'" for="luckysheetpivottablevaluecolrow1">'+locale_pivotTable.titleRow+'</label> <input type="radio" value="0" name="luckysheetpivottablevaluecolrow" id="luckysheetpivottablevaluecolrow1" /></span></div> <div id="luckysheet-modal-dialog-config-value" class="luckysheet-modal-dialog-slider-config-list luckysheet-scrollbars"> </div> </div> </div> </div> </div>';
    return `
        <div id="luckysheet-modal-dialog-slider-pivot" class="luckysheet-modal-dialog-slider luckysheet-modal-dialog-slider-pivot">
        <div class="luckysheet-modal-dialog-slider-title"> <span>${locale_pivotTable.title}</span> <span id="luckysheet-modal-dialog-slider-close" title="${locale_pivotTable.closePannel}"><i class="fa fa-times" aria-hidden="true"></i></span> </div>
        <div class="luckysheet-modal-dialog-slider-content">
            <div class="luckysheet-modal-dialog-slider-range">
                <div id="luckysheet-dialog-pivotTable-range"></div>
                <div id="luckysheet-dialog-pivotTable-range-seleted">${locale_pivotTable.editRange}</div>
            </div>
            <div class="luckysheet-modal-dialog-slider-list-title"> ${locale_pivotTable.tipPivotFieldSelected} <span title="${locale_pivotTable.tipClearSelectedField}" id="luckysheet-dialog-pivotTable-clearitem">${locale_pivotTable.btnClearSelectedField}</span></div>
            <div id="luckysheet-modal-dialog-pivotTable-list" class="luckysheet-modal-dialog-slider-list luckysheet-scrollbars"> </div>
            <div class="luckysheet-modal-dialog-slider-config-c">
                <div class="luckysheet-modal-dialog-slider-config luckysheet-modal-dialog-config-filter">
                    <div> <span><i class="fa fa-filter luckysheet-mousedown-cancel" aria-hidden="true"></i> ${locale_pivotTable.btnFilter}</span> </div>
                    <div id="luckysheet-modal-dialog-config-filter" class="luckysheet-modal-dialog-slider-config-list luckysheet-scrollbars"> </div>
                </div>
                <div class="luckysheet-modal-dialog-slider-config luckysheet-modal-dialog-config-row">
                    <div> <span><i class="fa fa-list-alt" aria-hidden="true"></i> ${locale_pivotTable.titleRow}</span> </div>
                    <div id="luckysheet-modal-dialog-config-row" class="luckysheet-modal-dialog-slider-config-list luckysheet-scrollbars"> </div>
                </div>
                <div class="luckysheet-modal-dialog-slider-config luckysheet-modal-dialog-config-column">
                    <div> <span><i class="fa fa-indent" aria-hidden="true"></i> ${locale_pivotTable.titleColumn}</span> </div>
                    <div id="luckysheet-modal-dialog-config-column" class="luckysheet-modal-dialog-slider-config-list luckysheet-scrollbars"> </div>
                </div>
                <div class="luckysheet-modal-dialog-slider-config luckysheet-modal-dialog-config-value">
                    <div> <span><i class="fa fa-cube" aria-hidden="true"></i> ${locale_pivotTable.titleValue}</span> <span style="float: right;margin-right: 10px;display:none;" id="luckysheetpivottablevaluecolrowshow"><label style="padding:0px 5px;margin:0px;font-size:12px;height:15px;line-height:15px;" title="${locale_pivotTable.tipShowColumn}" for="luckysheetpivottablevaluecolrow">${locale_pivotTable.titleColumn}</label> <input type="radio" checked="checked" value="1" name="luckysheetpivottablevaluecolrow" id="luckysheetpivottablevaluecolrow" /> <label style="padding:0px 5px;margin:0px;font-size:12px;height:15px;line-height:15px;" title="${locale_pivotTable.tipShowRow}" for="luckysheetpivottablevaluecolrow1">${locale_pivotTable.titleRow}</label> <input type="radio" value="0" name="luckysheetpivottablevaluecolrow" id="luckysheetpivottablevaluecolrow1" /></span></div>
                    <div id="luckysheet-modal-dialog-config-value" class="luckysheet-modal-dialog-slider-config-list luckysheet-scrollbars"> </div>
                </div>
            </div>
        </div>
        </div>
        `;
} 

// 一个用于遍历列表，生成dom的方法
function renderDomByList(list){
    let dom = ''
    let arr = [
        {
            "value": "null",
            "type": 0
        },
        {
            "value": "cellnull",
            "type": 0
        },
        {
            "value": "cellnonull"
        },
        {
            "value": "textinclude"
        },
        {
            "value": "textnotinclude"
        },
        {
            "value": "textstart"
        },
        {
            "value": "textend"
        },
        {
            "value": "textequal"
        },
        {
            "value": "dateequal"
        },
        {
            "value": "datelessthan"
        },
        {
            "value": "datemorethan"
        },
        {
            "value": "morethan"
        },
        {
            "value": "moreequalthan"
        },
        {
            "value": "lessthan"
        },
        {
            "value": "lessequalthan"
        },
        {
            "value": "equal"
        },
        {
            "value": "noequal"
        },
        {
            "value": "include",
            "type": 2
        },
        {
            "value": "noinclude",
            "type": 2
        }
    ]
    // arr = arr.map((item,index)=>{
    //   if(index ==0||index==1){
    //     return {value:item,type:0}
    //   }else if(index == 17||index ==18){
    //     return {value:item,type:2}
    //   }
    //   return {value:item}
    // })
    list.forEach((item,index)=>{
        dom += `<div data-value="${arr[index].value}" ${arr[index].type !=null ?`data-type="${arr[index].type}"`:``} >${item}</div>`
    })
    return dom
}
// 
function conditionalFilterConfirm({text, type, value, cindex, value1:inputValue1, value2:inputValue2}){
    // let d = _this.origindata;
    let pivotrealIndex = getSheetIndex(pivotTable.pivotDataSheetIndex);

    let otherfile = Store.luckysheetfile[pivotrealIndex];
    if(otherfile["data"] == null){
        otherfile["data"] = sheetmanage.buildGridData(otherfile);
    }
    // const  select = Store.luckysheetfile[pivotrealIndex].pivotTable.pivot_select_save
    const select = Store.luckysheetfile[pivotrealIndex].filter_select
    let colIndex = cindex - select.column[0]
    let d  = getdatabyselectionD(otherfile.data, select);
    // let d = pivotTable.origindata
    
    let rowhiddenother = {}; //其它筛选列的隐藏行
    let filterdata = {};
    let rowhidden = {};
    let caljs = {};
    if (text) {
        // let $t = $("#luckysheet-pivotTableFilter-selected span");
        // let type = $t.data("type"), value = $t.data("value");

        caljs["value"] = value;
        caljs["text"] = text;


        if (type == "0") {
            caljs["type"] = "0";
        }
        else if (type == "2") {
            // let $input = $("#luckysheet-pivotTableFilter-menu .luckysheet-pivotTableFilter-selected-input2 input");
            caljs["type"] = "2";
            // caljs["value1"] = $input.eq(0).val();
            // caljs["value2"] = $input.eq(1).val();
            caljs['value1']  = inputValue1
            caljs['value2']  = inputValue2

        }
        else {
            caljs["type"] = "1";
            // caljs["value1"] = $("#luckysheet-pivotTableFilter-menu .luckysheet-pivotTableFilter-selected-input").eq(0).find("input").val();
            caljs['value1']  = inputValue1

        }

        for (let r = 1; r < d.length; r++) {
            if(r in rowhiddenother){
                continue;
            }

            if(d[r] == null){
                continue;
            }

            // let cell = d[r][cindex];
       
            let cell = d[r][colIndex];
            
            
            if (value == "cellnull") { //单元格为空
                if(cell != null && !isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
            }
            else if (value == "cellnonull") { //单元格有数据
                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
            }
            else if (value == "textinclude") { //文本包含 
                let value1 = caljs["value1"];

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else{
                    if(cell.m.indexOf(value1) == -1){
                        rowhidden[r] = 0;
                    }
                }
            }
            else if (value == "textnotinclude") { //文本不包含
                let value1 = caljs["value1"];

                if(cell == null || isRealNull(cell.v)){

                }
                else{
                    if(cell.m.indexOf(value1) > -1){
                        rowhidden[r] = 0;
                    }
                }
            }
            else if (value == "textstart") { //文本开头为
                let value1 = caljs["value1"], valuelen = value1.length;

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else{
                    if(cell.m.substr(0, valuelen) != value1){
                        rowhidden[r] = 0;
                    }
                }
            }
            else if (value == "textend") { //文本结尾为
                let value1 = caljs["value1"], valuelen = value1.length;

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else{
                    if(valuelen > cell.m.length || cell.m.substr(cell.m.length - valuelen, valuelen) != value1){
                        rowhidden[r] = 0;
                    }
                }
            }
            else if (value == "textequal") { //文本等于
                let value1 = caljs["value1"];

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else{
                    if(cell.m != value1){
                        rowhidden[r] = 0;
                    }
                }
            }
            else if (value == "dateequal") { //日期等于
                let value1 = genarate(caljs["value1"])[2];

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else if(cell.ct != null && cell.ct.t == "d"){
                    if(parseInt(cell.v) != value1){
                        rowhidden[r] = 0;
                    }
                }
                else{
                    rowhidden[r] = 0;
                }
            }
            else if (value == "datelessthan") { //日期早于
                let value1 = genarate(caljs["value1"])[2];

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else if(cell.ct != null && cell.ct.t == "d"){
                    if(parseInt(cell.v) >= value1){
                        rowhidden[r] = 0;
                    }
                }
                else{
                    rowhidden[r] = 0;
                }
            }
            else if (value == "datemorethan") { //日期晚于
                let value1 = genarate(caljs["value1"])[2];

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else if(cell.ct != null && cell.ct.t == "d"){
                    if(parseInt(cell.v) <= value1){
                        rowhidden[r] = 0;
                    }
                }
                else{
                    rowhidden[r] = 0;
                }
            }
            else if (value == "morethan") { //大于
                let value1 = parseFloat(caljs["value1"]);

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else if(cell.ct != null && cell.ct.t == "n"){
                    if(cell.v <= value1){
                        rowhidden[r] = 0;
                    }
                }
                else{
                    rowhidden[r] = 0;
                }
            }
            else if (value == "moreequalthan") { //大于等于
                let value1 = parseFloat(caljs["value1"]);

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else if(cell.ct != null && cell.ct.t == "n"){
                    if(cell.v < value1){
                        rowhidden[r] = 0;
                    }
                }
                else{
                    rowhidden[r] = 0;
                }
            }
            else if (value == "lessthan") { //小于
                let value1 = parseFloat(caljs["value1"]);

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else if(cell.ct != null && cell.ct.t == "n"){
                    if(cell.v >= value1){
                        rowhidden[r] = 0;
                    }
                }
                else{
                    rowhidden[r] = 0;
                }
            }
            else if (value == "lessequalthan") { //小于等于
                let value1 = parseFloat(caljs["value1"]);

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else if(cell.ct != null && cell.ct.t == "n"){
                    if(cell.v > value1){
                        rowhidden[r] = 0;
                    }
                }
                else{
                    rowhidden[r] = 0;
                }
            }
            else if (value == "equal") { //等于
                let value1 = parseFloat(caljs["value1"]);

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else if(cell.ct != null && cell.ct.t == "n"){
                    if(cell.v != value1){
                        rowhidden[r] = 0;
                    }
                }
                else{
                    rowhidden[r] = 0;
                }
            }
            else if (value == "noequal") { //不等于
                let value1 = parseFloat(caljs["value1"]);

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else if(cell.ct != null && cell.ct.t == "n"){
                    if(cell.v == value1){
                        rowhidden[r] = 0;
                    }
                }
                else{
                    rowhidden[r] = 0;
                }
            }
            else if (value == "include") { //介于
                let value1 = parseFloat(caljs["value1"]), value2 = parseFloat(caljs["value2"]);

                let min, max;
                if(value1 < value2){
                    min = value1;
                    max = value2;
                }
                else{
                    max = value1;
                    min = value2;   
                }

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else if(cell.ct != null && cell.ct.t == "n"){
                    if(cell.v < min || cell.v > max){
                        rowhidden[r] = 0;
                    }
                }
                else{
                    rowhidden[r] = 0;
                }
            }
            else if (value == "noinclude") { //不在其中
                let value1 = parseFloat(caljs["value1"]), value2 = parseFloat(caljs["value2"]);

                let min, max;
                if(value1 < value2){
                    min = value1;
                    max = value2;
                }
                else{
                    max = value1;
                    min = value2;   
                }

                if(cell == null || isRealNull(cell.v)){
                    rowhidden[r] = 0;
                }
                else if(cell.ct != null && cell.ct.t == "n"){
                    if(cell.v >= min && cell.v <= max){
                        rowhidden[r] = 0;
                    }
                }
                else{
                    rowhidden[r] = 0;
                }
            }
        }
    }
    let $top = $("#luckysheet-filter-options-sheet" + Store.currentSheetIndex + " .luckysheet-filter-options").eq(colIndex);
    
    /* let $top = $("#luckysheet-modal-dialog-pivotTable-list .luckysheet-modal-dialog-slider-list-item").eq(cindex);

    pivotTable.setDatatojsfile("rowhidden", rowhidden, cindex);

    let newdata = [];
    for (let i = 0; i < d.length; i++) {
        if(i in rowhidden || i in rowhiddenother){
            continue;
        }

        newdata.push([].concat(d[i]));
    }

    pivotTable.celldata = newdata;
    pivotTable.refreshPivotTable(); */

    let cfg = $.extend(true, {}, Store.config);
    cfg["rowhidden"] = rowhidden

    //保存撤销
    if(Store.clearjfundo){
        let redo = {};
        redo["type"] = "datachangeAll_filter";
        redo["sheetIndex"] = Store.currentSheetIndex;

        redo["config"] = $.extend(true, {}, Store.config);
        redo["curconfig"] = cfg;

        // redo["optionstate"] = optionstate;
        // redo["optionsindex"] = cindex - st_c;
        redo["optionsindex"] = colIndex;

        

        redo["rowhidden"] = $.extend(true, {}, rowhidden);
        // redo["rowhidenPre"] = $.extend(true, {}, rowhidenPre);

        if (caljs != null) {
            redo["caljs"] = caljs;
        }

        Store.jfundo.length  = 0;
        Store.jfredo.push(redo);
    }

    //config
    Store.config = cfg;
    Store.luckysheetfile[getSheetIndex(Store.currentSheetIndex)].config = Store.config;


    //行高、列宽 刷新  
    jfrefreshgrid_rhcw(Store.flowdata.length, Store.flowdata[0].length);

    console.log(filterdata,rowhidden,caljs);
 
    

}
function filtermenuHTML() { 
    const _locale = locale();
    const locale_filter = _locale.filter;
    let dom =`
    <div class="filter-container" id="luckysheet-\${menuid}-menu" style="display:none">
		<div class="filter-title-wrap">
			<div id="luckysheet-\${menuid}-orderby-asc"><svg class="filter-title-icon" t="1715309503314" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="1833" width="200" height="200">
					<path
						d="M285.952 114.432h68.096L493.824 480h-64l-33.28-91.648H243.456L210.176 480h-64L285.952 114.432zM261.376 339.2h117.248L321.28 178.944h-2.048L261.376 339.2z"
						fill="#27A2DF" p-id="1834"></path>
					<path d="M184.576 562.432h273.92v47.616L247.552 876.8h223.232V928H169.216v-47.104l211.456-267.264H184.576z"
						fill="#30AD98" p-id="1835"></path>
					<path d="M789.024 224v693.024h-64V224L624 325.024l-48-48L757.024 96l181.024 181.024-48 48L789.024 224z"
						fill="#5D6D7E" p-id="1836"></path>
				</svg>升序</div>
			<div  id="luckysheet-\${menuid}-orderby-desc"><svg class="filter-title-icon" t="1715309577145" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="2829" width="200" height="200">
					<path
						d="M253.952 562.432h68.096L461.824 928h-64l-33.28-91.648H211.456L178.176 928h-64l139.776-365.568zM229.376 787.2h117.248L289.28 626.944h-2.048L229.376 787.2z"
						fill="#27A2DF" p-id="2830"></path>
					<path d="M152.576 114.432h273.92v47.616L215.552 428.8h223.232V480H137.216v-47.104l211.456-267.264H152.576z"
						fill="#30AD98" p-id="2831"></path>
					<path d="M693.024 789.024V96h64v693.024l101.024-101.024 48 48-181.024 181.024L544 736l48-48 101.024 101.024z"
						fill="#5D6D7E" p-id="2832"></path>
				</svg>降序</div>
			<!-- <div class="div-center">颜色排序</div> -->
		</div>
		<div class="filter-tab-wrap">
			<div class="filter-tab-left-wrap" id="tabLeftWrap">
				<div class="txt-bottom" >内容筛选</div>
				<div>颜色筛选</div>
			</div>
			<div id="conditionalFilter" style="position:relative;" class="filter-tab-right-wrap div-center"><svg class="filter-title-icon" t="1715394915718" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4284" width="200" height="200"><path d="M622.592 1024c-18.432 0-33.792-15.36-33.792-33.792V461.824c0-7.168 3.072-15.36 7.168-21.504L878.592 82.944c5.12-6.144 0-15.36-8.192-15.36H151.552c-8.192 0-12.288 9.216-8.192 15.36L415.744 435.2c4.096 6.144 7.168 13.312 7.168 20.48v314.368c0 18.432-15.36 33.792-33.792 33.792-18.432 0-33.792-15.36-33.792-33.792v-302.08L36.864 54.272c-8.192-10.24-9.216-23.552-4.096-35.84C38.912 7.168 50.176 0 63.488 0h898.048c13.312 0 24.576 7.168 30.72 19.456 5.12 11.264 4.096 25.6-4.096 35.84L656.384 473.088v517.12c0 18.432-15.36 33.792-33.792 33.792z" p-id="4285"></path><path d="M776.192 808.96c-18.432 0-33.792-15.36-33.792-33.792 0-18.432 15.36-33.792 33.792-33.792h184.32c18.432 0 33.792 15.36 33.792 33.792 0 18.432-15.36 33.792-33.792 33.792h-184.32z m0-131.072c-18.432 0-33.792-15.36-33.792-33.792 0-18.432 15.36-33.792 33.792-33.792h184.32c18.432 0 33.792 15.36 33.792 33.792 0 18.432-15.36 33.792-33.792 33.792h-184.32z m0-131.072c-18.432 0-33.792-15.36-33.792-33.792s15.36-33.792 33.792-33.792h184.32c18.432 0 33.792 15.36 33.792 33.792s-15.36 33.792-33.792 33.792h-184.32z" p-id="4286"></path></svg>
                条件筛选
                    <div id="conditionalFilterWrap" class="conditional-filter-wrap" style="display:none;">
                        <div>
                            ${renderDomByList(Object.values(locale_filter.conditionalFilterObj))}
                        </div>
                    </div>
                </div>
		</div>
		<div style="margin:10px 16px;background-color:white;">
            <div id="luckysheet-\${menuid}-byvalue">
                <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"
                    style="padding:0px 3px 8px;background:#F8F7F7;">
                    <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel" style="display:flex;justify-content:space-between;">
                        <input type="text"
                            placeholder="${locale_filter.filterValueByTip}" class="luckysheet-mousedown-cancel"
                            id="luckysheet-\${menuid}-byvalue-input" 
                            style="width:90%;"
                            />
                        <div style="margin-left:4px;" class="luckysheet-\${menuid}-byvalue-input-icon luckysheet-mousedown-cancel"><i
                                class="fa fa-search luckysheet-mousedown-cancel" aria-hidden="true"></i></div>
                    </div>
                </div>
                <!--全选、清除等按钮-->
                <div style="display:none;"
                    class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel luckysheet-mousedown-\${menuid}-byvalue-btn">
                    <span id="luckysheet-\${menuid}-byvalue-btn-all"
                        class="luckysheet-mousedown-cancel">${locale_filter.filterValueByAllBtn}</span> - <span
                        id="luckysheet-\${menuid}-byvalue-btn-clear"
                        class="luckysheet-mousedown-cancel">${locale_filter.filterValueByClearBtn}</span> - <span
                        id="luckysheet-\${menuid}-byvalue-btn-contra"
                        class="luckysheet-mousedown-cancel">${locale_filter.filterValueByInverseBtn}
                    </span>
                </div>
                <div class="all-clear-container padl10">
                    <input type="checkbox" checked id="allClearCheck" style="margin-left:3px;"/>(<span id= "allSelectBtn">全选</span> | <span id="contractBtn">反选</span>)
                </div>
                <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel padl10">
                    <div id="luckysheet-\${menuid}-byvalue-select"
                        class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"></div>
                </div>
            </div>
            <div id="luckysheet-filter-orderby-color" class="hide">
                <!--<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel" style="position: relative;">
                    ${locale_filter.filterByColor}
                </div>-->
            </div>
        </div>
		<div>
            <div class="bottom-btn">
                <div class="sure-btn" id="luckysheet-\${menuid}-confirm">${locale_filter.filterConform}</div>
                <div class="cancel-btn" id="luckysheet-\${menuid}-cancel">${locale_filter.filterCancel}</div>
            </div>
            <!--<div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                <div class="btn btn-primary luckysheet-mousedown-cancel" id="luckysheet-\${menuid}-confirm">
                    ${locale_filter.filterConform}</div>
                <div class="btn btn-default luckysheet-mousedown-cancel" id="luckysheet-\${menuid}-cancel">
                    ${locale_filter.filterCancel}</div>
                <div class="btn btn-danger luckysheet-mousedown-cancel" id="luckysheet-\${menuid}-initial">
                    ${locale_filter.clearFilter}</div>
            </div>-->
        </div>
		<!-- 标记iiii -->
	</div>
    `

    setTimeout(()=>{
        $('#luckysheet-filter-orderby-color').hide()
        $('#luckysheet-filter-menu').attr('data-v', 'contentFilter')

        // 条件筛选每一项
        $('#conditionalFilterWrap').on('click',function(e){
            e.preventDefault();
            e.stopPropagation();
            $('#conditionalFilterWrap').toggle()

            console.log($(e.target).attr('data-value'),$(e.target).attr('data-type'));
            const dataValue = $(e.target).attr('data-value')
            const dataType = $(e.target).attr('data-type')
            const itemText = $(e.target).text() //选中的
            const dataCIndex = $('#luckysheet-filter-menu').data('cindex')

            if(dataType == 0){
                // 这里还需要做一些事情
                $('#conditionalFilterWrap').hide()
                conditionalFilterConfirm({text:itemText, value:dataValue,
                    type:dataType, cindex:dataCIndex})
            }else{
                const modal = document.createElement('div')
                modal.id = 'conditionalFilterModal'
                modal.className = 'conditional-filter-modal'
                modal.innerHTML= `
                <div>
                    <div class="title-wrap">
                        <div id="customTitle">${$(e.target).text()}</div>
                        <div id="conditionalFilterCloseBtn" class="close-icon"><svg style="height: 10px;width: 10px;" t="1715402459368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5272" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#FF0033" fill-opacity="0" p-id="5273"></path><path d="M240.448 168l2.346667 2.154667 289.92 289.941333 279.253333-279.253333a42.666667 42.666667 0 0 1 62.506667 58.026666l-2.133334 2.346667-279.296 279.210667 279.274667 279.253333a42.666667 42.666667 0 0 1-58.005333 62.528l-2.346667-2.176-279.253333-279.253333-289.92 289.962666a42.666667 42.666667 0 0 1-62.506667-58.005333l2.154667-2.346667 289.941333-289.962666-289.92-289.92a42.666667 42.666667 0 0 1 57.984-62.506667z" fill="#111111" p-id="5274"></path></svg></div>
                    </div>
                    <div class="content-wrap" id="conditionalFilterModalContent">
                        ${dataType == 2 ? `<input type="text" id="filterModalVal1" placeholder="筛选值">
                        <input type="text" id="filterModalVal2" placeholder="筛选值">`:
                        `<input type="text" id="filterModalVal1" placeholder="筛选值">`
                        }
                    </div>
                    <div class="bottom-wrap" id="conditionalBottomBtn">
                        <div class="sure-btn" id="conditionalSure">确定</div>
                        <div class="cancel-btn" id="conditionalCancel">取消</div>
                    </div>
                </div>
                `
                if(!document.querySelector('#conditionalFilterModal')){
                    document.body.appendChild(modal)
                }else{
                    $('#conditionalFilterModal').show()
                    $('#conditionalFilterModalContent').html(` ${dataType == 2 ? `<input type="text" id="filterModalVal1" placeholder="筛选值">
                    <input type="text" id="filterModalVal2" placeholder="筛选值">`:
                    `<input type="text" id="filterModalVal1" placeholder="筛选值">`
                    }`)
                }
                $('#luckysheet-filter-menu').hide()


                setTimeout(()=>{
                    $('#conditionalFilterCloseBtn').on('click',function(){
                        $('#conditionalFilterModal').hide()
                    })
                    //条件筛选的确定和取消按钮
                    $('#conditionalBottomBtn').on('click',function(e){
                        e.stopPropagation()
                        const domId = e.target.id
                        if(domId === 'conditionalSure'){
                            const  value1 = $('#filterModalVal1').val()
                            const value2 = $('#filterModalVal2').val()

                            conditionalFilterConfirm({text:itemText, value:dataValue,
                                type:dataType, cindex:dataCIndex, value1,value2})
                                
                             $('#conditionalFilterModal').hide()   
                        }else{
                            // 取消
                            $('#conditionalFilterModal').hide()
                            // document.body.removeChild(modal)
                            $('#luckysheet-filter-menu').show()
                        }
                    })
                })
            }
        })

        // 条件筛选
        $('#conditionalFilter').on('click',function(e){
            $('#conditionalFilterWrap').toggle()
        })

        // nby 筛选切换
        $('#tabLeftWrap').on('click',function (e) {
            const curDiv = e.target
            if(curDiv.innerText === '颜色筛选'){
                $('#luckysheet-filter-orderby-color').show()
                $('#luckysheet-filter-byvalue').hide()
                renderColorContainer()
                $('#luckysheet-filter-menu').attr('data-v', 'colorFilter')

            }else{
                // 内容筛选
                $('#luckysheet-filter-orderby-color').hide()
                $('#luckysheet-filter-byvalue').show()
                $('#luckysheet-filter-menu').attr('data-v', 'contentFilter')

            }

            // 确保点击的是tabLeftWrap内的div元素
            if (curDiv.parentNode === tabLeftWrap) {
                // 遍历所有子节点
                Array.from(tabLeftWrap.children).forEach(child => {
                    // 移除所有子节点的txt-bottom类
                    child.classList.remove('txt-bottom');
                });
                // 为当前点击的节点添加txt-bottom类
                curDiv.classList.add('txt-bottom');
            }
        })

        // 全选和反选
        $('#allClearCheck').on('click',function(){
            if (this.checked) {
                // 执行当checkbox被选中时的代码
                $('#luckysheet-filter-byvalue-btn-all').click()
            } else {
                // 执行当checkbox未被选中时的代码
                $('#luckysheet-filter-byvalue-btn-contra').click()    
            }
        })
        
        $('#allSelectBtn').on('click',function(){
            $('#luckysheet-filter-byvalue-btn-all').click()
            // $('#allClearCheck').prop('checked',true) 
        })
        // 反选
        $('#contractBtn').on('click',function(){
            $('#luckysheet-filter-byvalue-btn-contra').click()    
            $('#allClearCheck').prop('checked',!$('#allClearCheck').prop('checked')) 
        })
        // 应该要清除或者添加到公共的地方，
        window.addEventListener('click',function(e){
            if (!e.target.closest('.filter-container')) {
                if($('.filter-container')[0]){
                    $('.filter-container')[0].style.display = "none";
                    $('#luckysheet-filter-byvalue').click()
                    $('#conditionalFilterWrap').hide()
                }
            }
        })

        // 渲染颜色筛选的列表
        renderColorContainer()
        function renderColorContainer(){
              //遍历筛选列颜色
              let $menu = $("#luckysheet-filter-menu");
              let st_r = $menu.data("str"), 
                  ed_r = $menu.data("edr"), 
                  cindex = $menu.data("cindex"), 
                  st_c = $menu.data("stc"), 
                  ed_c = $menu.data("edc");
              let bgMap = {}; //单元格颜色
              let fcMap = {}; //字体颜色
      
              let af_compute = alternateformat.getComputeMap();
              let cf_compute = conditionformat.getComputeMap();
      
              for (let r = st_r + 1; r <= ed_r; r++) {
                  let cell = Store.flowdata[r][cindex];
      
                  //单元格颜色
                  let bg = menuButton.checkstatus(Store.flowdata, r, cindex , "bg");
  
                  if(bg == null){
                      bg = "#ffffff";
                  }
      
                  let checksAF = alternateformat.checksAF(r, cindex, af_compute);
                  if(checksAF != null){//若单元格有交替颜色
                      bg = checksAF[1];
                  }
      
                  let checksCF = conditionformat.checksCF(r, cindex, cf_compute);
                  if(checksCF != null && checksCF["cellColor"] != null){//若单元格有条件格式
                      bg = checksCF["cellColor"];
                  }
      
                  if(bg.indexOf("rgb") > -1){
                      bg = rgbTohex(bg);
                  }
      
                  if(bg.length == 4){
                      bg = bg.substr(0, 1) + bg.substr(1, 1).repeat(2) + bg.substr(2, 1).repeat(2) + bg.substr(3, 1).repeat(2);
                  }
      
                  //字体颜色
                  let fc = menuButton.checkstatus(Store.flowdata, r, cindex , "fc");
                  
                  if(checksAF != null){//若单元格有交替颜色
                      fc = checksAF[0];
                  }
      
                  if(checksCF != null && checksCF["textColor"] != null){//若单元格有条件格式
                      fc = checksCF["textColor"];
                  }
      
                  if(fc.indexOf("rgb") > -1){
                      fc = rgbTohex(fc);
                  }
      
                  if(fc.length == 4){
                      fc = fc.substr(0, 1) + fc.substr(1, 1).repeat(2) + fc.substr(2, 1).repeat(2) + fc.substr(3, 1).repeat(2);
                  }
      
                  if(Store.config != null && Store.config["rowhidden"] != null && r in Store.config["rowhidden"]){
                      bgMap[bg] = 1;
      
                      if(cell != null && !isRealNull(cell.v)){
                          fcMap[fc] = 1;
                      }
                  }
                  else{
                      bgMap[bg] = 0;
      
                      if(cell != null && !isRealNull(cell.v)){
                          fcMap[fc] = 0;
                      }
                  }
              }
              //
              let filterBgColorHtml = '';
              if(JSON.stringify(bgMap).length > 2 && Object.keys(bgMap).length > 1){
                  let bgColorItemHtml = '';
                  for(let b in bgMap){
                      if(bgMap[b] == 0){
                          bgColorItemHtml += '<div class="item luckysheet-mousedown-cancel filter-color-item" ><label class="luckysheet-mousedown-cancel mr6" style="display:inline-block;width:100px;height:14px;background-color: ' + b + '" title="' + b + '"></label><input class="luckysheet-mousedown-cancel" type="checkbox" checked="checked"/></div>';
                      }
                      else{
                          bgColorItemHtml += '<div class="item luckysheet-mousedown-cancel filter-color-item" ><label class="luckysheet-mousedown-cancel mr6" style="display:inline-block;width:100px;height:14px;background-color: ' + b + '" title="' + b + '"></label><input class="luckysheet-mousedown-cancel" type="checkbox"/></div>';
                      }
                  }
                  filterBgColorHtml = `<div id="filterBgColor" class="box luckysheet-mousedown-cancel">
                        <!--<div class="title luckysheet-mousedown-cancel">${locale_filter.filiterByColorTip}</div>-->
                        <div style="max-height:128px;overflow:auto;" class="luckysheet-mousedown-cancel">${bgColorItemHtml}</div>
                    </div>`
              }
              let filterFcColorHtml = '';
             /* 
             //   字体颜色的去掉
              if(JSON.stringify(fcMap).length > 2 && Object.keys(fcMap).length > 1){
                  let fcColorItemHtml = '';
                  for(let f in fcMap){
                      if(fcMap[f] == 0){
                          fcColorItemHtml += '<div class="item luckysheet-mousedown-cancel"><label class="luckysheet-mousedown-cancel" style="background-color: ' + f + '" title="' + f + '"></label><input class="luckysheet-mousedown-cancel" type="checkbox" checked="checked"/></div>';
                      }
                      else{
                          fcColorItemHtml += '<div class="item luckysheet-mousedown-cancel"><label class="luckysheet-mousedown-cancel" style="background-color: ' + f + '" title="' + f + '"></label><input class="luckysheet-mousedown-cancel" type="checkbox"/></div>';
                      }
                  }
                  filterFcColorHtml = '<div id="filterFcColor" class="box luckysheet-mousedown-cancel"><div class="title luckysheet-mousedown-cancel">'+locale_filter.filiterByTextColorTip+'</div><div style="max-height:128px;overflow:auto;" class="luckysheet-mousedown-cancel">' + fcColorItemHtml + '</div></div>';
              } */
              //
              let content;
              if(filterBgColorHtml == '' && filterFcColorHtml == ''){
                  content = '<div class="luckysheet-mousedown-cancel" style="padding: 10px 30px;text-align: center;">'+locale_filter.filterContainerOneColorTip+'</div>';
              }
              else{
                  content = filterBgColorHtml + filterFcColorHtml + ''
                //   '<div class="luckysheet-mousedown-cancel"><button id="luckysheet-filter-orderby-color-confirm" class="btn btn-primary luckysheet-mousedown-cancel" style="margin: 5px 20px;width: 70px;">'+locale_button.confirm+'</button></div>';
              }
              
              $('#luckysheet-filter-orderby-color').html(content)


        }

    })

    let dom2 =`
    <div class="luckysheet-cols-menu luckysheet-mousedown-cancel luckysheet-filter-menu"
    id="luckysheet-\${menuid}-menu">
        <div id="luckysheet-\${menuid}-orderby-asc" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
            <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.sortByAsc}
            </div>
        </div>
        <div id="luckysheet-\${menuid}-orderby-desc" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
            <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                <div style="width:205px;" class="luckysheet-mousedown-cancel">${locale_filter.sortByDesc}</div>
            </div>
        </div>
        <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div>
        <div id="luckysheet-\${menuid}-orderby-color"
            class="luckysheet-cols-menuitem luckysheet-cols-submenu luckysheet-mousedown-cancel">
            <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel" style="position: relative;">
                ${locale_filter.filterByColor}<span
                    class="luckysheet-submenu-arrow iconfont luckysheet-iconfont-youjiantou"
                    style="user-select: none;right: 0;"></span>
            </div>
        </div>
        <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div>
        <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" id="luckysheet-\${menuid}-bycondition"
            style="padding-top:0px;padding-bottom:0px;">
            <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"><i class="fa fa-caret-right"
                    aria-hidden="true"></i> ${locale_filter.filterByCondition}</div>
        </div>
        <div class="luckysheet-\${menuid}-bycondition" style="display:none;">
            <div class="luckysheet-flat-menu-button luckysheet-mousedown-cancel"
                id="luckysheet-\${menuid}-selected"><span class="luckysheet-mousedown-cancel" data-value="null"
                    data-type="0">${locale_filter.filiterInputNone}</span>
                <div class="luckysheet-mousedown-cancel"><i class="fa fa-sort" aria-hidden="true"></i></div>
            </div>
            <div class="luckysheet-\${menuid}-selected-input"><input type="text"
                    placeholder="${locale_filter.filiterInputTip}" class="luckysheet-mousedown-cancel" /></div>
            <div class="luckysheet-\${menuid}-selected-input luckysheet-\${menuid}-selected-input2">
                <span>从</span><input type="text" placeholder="${locale_filter.filiterRangeStartTip}"
                    class="luckysheet-mousedown-cancel" /><span>到</span><input type="text"
                    placeholder="${locale_filter.filiterRangeEndTip}" class="luckysheet-mousedown-cancel" /></div>
        </div>
        <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div>
        <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" id="luckysheet-\${menuid}-byvalue"
            style="padding-top:0px;padding-bottom:0px;">
            <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"><i class="fa fa-caret-right"
                    aria-hidden="true"></i> ${locale_filter.filterByValues}</div>
        </div>
        <div class="luckysheet-\${menuid}-byvalue">
            <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                <div
                    class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel luckysheet-mousedown-\${menuid}-byvalue-btn">
                    <span id="luckysheet-filter-byvalue-btn-all"
                        class="luckysheet-mousedown-cancel">${locale_filter.filterValueByAllBtn}</span> - <span
                        id="luckysheet-\${menuid}-byvalue-btn-clear"
                        class="luckysheet-mousedown-cancel">${locale_filter.filterValueByClearBtn}</span> - <span
                        id="luckysheet-\${menuid}-byvalue-btn-contra"
                        class="luckysheet-mousedown-cancel">${locale_filter.filterValueByInverseBtn}</span>
                    <div><i class="fa fa-\${menuid} luckysheet-mousedown-cancel" aria-hidden="true"></i></div>
                </div>
            </div>
            <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"
                style="padding-left:3px; padding-right:3px;">
                <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"><input type="text"
                        placeholder="${locale_filter.filterValueByTip}" class="luckysheet-mousedown-cancel"
                        id="luckysheet-\${menuid}-byvalue-input" />
                    <div class="luckysheet-\${menuid}-byvalue-input-icon luckysheet-mousedown-cancel"><i
                            class="fa fa-search luckysheet-mousedown-cancel" aria-hidden="true"></i></div>
                </div>
            </div>
            <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
                <div id="luckysheet-\${menuid}-byvalue-select"
                    class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel"></div>
            </div>
        </div>
        <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div>
        <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel">
            <div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">
                <div class="btn btn-primary luckysheet-mousedown-cancel" id="luckysheet-\${menuid}-confirm">
                    ${locale_filter.filterConform}</div>
                <div class="btn btn-default luckysheet-mousedown-cancel" id="luckysheet-\${menuid}-cancel">
                    ${locale_filter.filterCancel}</div>
                <div class="btn btn-danger luckysheet-mousedown-cancel" id="luckysheet-\${menuid}-initial">
                    ${locale_filter.clearFilter}</div>
            </div>
        </div>
    </div>`
    return dom
}

function filtersubmenuHTML() {
    const _locale = locale();
    const locale_filter = _locale.filter;
    
    return `<div style="z-index:1004;overflow-y:auto;" class="luckysheet-filter-submenu luckysheet-cols-menu luckysheet-mousedown-cancel" id="luckysheet-\${menuid}-submenu"><div data-value="null" data-type="0" class="luckysheet-cols-menuitem luckysheet-mousedown-cancel"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionNone}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="cellnull"  data-type="0"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellIsNull}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="cellnonull"  data-type="0"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellNotNull}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="textinclude"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellTextContain}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="textnotinclude"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellTextNotContain}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="textstart"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellTextStart}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="textend"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellTextEnd}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="textequal"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellTextEqual}</div></div>  <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div>  <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="dateequal"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellDateEqual}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="datelessthan"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellDateBefore}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="datemorethan"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellDateAfter}</div></div> <div class="luckysheet-menuseparator luckysheet-mousedown-cancel" role="separator"></div> <div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="morethan"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellGreater}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="moreequalthan"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellGreaterEqual}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="lessthan"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellLess}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="lessequalthan"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellLessEqual}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="equal"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellEqual}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="noequal"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellNotEqual}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="include"  data-type="2"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellBetween}</div></div><div class="luckysheet-cols-menuitem luckysheet-mousedown-cancel" data-value="noinclude" data-type="2"><div class="luckysheet-cols-menuitem-content luckysheet-mousedown-cancel">${locale_filter.conditionCellNotBetween}</div></div> </div>`
}

function luckysheetAlternateformatHtml(){
    const _locale = locale()
    const alternatingColors =_locale.alternatingColors;
    const toolbar = _locale.toolbar;


    return '<div id="luckysheet-modal-dialog-slider-alternateformat" class="luckysheet-modal-dialog-slider luckysheet-modal-dialog-slider-alternateformat" style="display: block;">'+
                '<div class="luckysheet-modal-dialog-slider-title">'+
                    '<span>'+ toolbar.alternatingColors +'</span>'+
                    '<span class="luckysheet-model-close-btn" title="'+ alternatingColors.close +'">'+
                        '<i class="fa fa-times" aria-hidden="true"></i>'+
                    '</span>'+
                '</div>'+
                '<div class="luckysheet-modal-dialog-slider-content">'+
                    '<div class="textTitle">'+ alternatingColors.applyRange +'</div>'+
                    '<div id="luckysheet-alternateformat-range">'+
                        '<input class="formulaInputFocus" placeholder="'+ alternatingColors.selectRange +'"/>'+
                        '<i class="fa fa-table" aria-hidden="true"></i>'+
                    '</div>'+
                    '<div id="luckysheet-alternateformat-checkbox">'+
                        '<div class="cf">'+
                            '<input type="checkbox" id="luckysheet-alternateformat-rowHeader"/>'+
                            '<label for="luckysheet-alternateformat-rowHeader">'+ alternatingColors.header +'</label>'+
                        '</div>'+
                        '<div class="cf">'+
                            '<input type="checkbox" id="luckysheet-alternateformat-rowFooter"/>'+
                            '<label for="luckysheet-alternateformat-rowFooter">'+ alternatingColors.footer +'</label>'+
                        '</div>'+
                    '</div>'+
                    '<div class="textTitle">'+alternatingColors.textTitle+'</div>'+
                    '<div id="luckysheet-alternateformat-modelList" class="cf"></div>'+
                    '<div class="textTitle">'+alternatingColors.custom+'</div>'+
                    '<div id="luckysheet-alternateformat-modelCustom" class="cf"></div>'+
                    '<div id="luckysheet-alternateformat-modelToning">'+
                        '<div class="toningbox header">'+
                            '<div class="toningShow"> '+ alternatingColors.header +' </div>'+
                            '<div class="luckysheet-color-menu-button-indicator" title="'+ alternatingColors.selectionTextColor +'" style="border-bottom-color: #000;margin-right: 10px;"> <div class="luckysheet-icon luckysheet-inline-block"> <div aria-hidden="true" class="luckysheet-icon-img-container luckysheet-icon-img luckysheet-icon-text-color" style="user-select: none;"> </div> </div> </div>'+
                            '<div class="luckysheet-color-menu-button-indicator" title="'+ alternatingColors.selectionCellColor +'" style="border-bottom-color: #fff;"> <div class="luckysheet-icon luckysheet-inline-block"> <div aria-hidden="true" class="luckysheet-icon-img-container luckysheet-icon-img luckysheet-icon-cell-color" style="user-select: none;"> </div> </div> </div>'+
                        '</div>'+
                        '<div class="toningbox ctOne">'+
                            '<div class="toningShow"> '+ alternatingColors.colorShow +'1 </div>'+
                            '<div class="luckysheet-color-menu-button-indicator" title="'+ alternatingColors.selectionTextColor +'" style="border-bottom-color: #000;margin-right: 10px;"> <div class="luckysheet-icon luckysheet-inline-block"> <div aria-hidden="true" class="luckysheet-icon-img-container luckysheet-icon-img luckysheet-icon-text-color" style="user-select: none;"> </div> </div> </div>'+
                            '<div class="luckysheet-color-menu-button-indicator" title="'+ alternatingColors.selectionCellColor +'" style="border-bottom-color: #fff;"> <div class="luckysheet-icon luckysheet-inline-block"> <div aria-hidden="true" class="luckysheet-icon-img-container luckysheet-icon-img luckysheet-icon-cell-color" style="user-select: none;"> </div> </div> </div>'+
                        '</div>'+
                        '<div class="toningbox ctTwo">'+
                            '<div class="toningShow"> '+ alternatingColors.colorShow +'2 </div>'+
                            '<div class="luckysheet-color-menu-button-indicator" title="'+ alternatingColors.selectionTextColor +'" style="border-bottom-color: #000;margin-right: 10px;"> <div class="luckysheet-icon luckysheet-inline-block"> <div aria-hidden="true" class="luckysheet-icon-img-container luckysheet-icon-img luckysheet-icon-text-color" style="user-select: none;"> </div> </div> </div>'+
                            '<div class="luckysheet-color-menu-button-indicator" title="'+ alternatingColors.selectionCellColor +'" style="border-bottom-color: #fff;"> <div class="luckysheet-icon luckysheet-inline-block"> <div aria-hidden="true" class="luckysheet-icon-img-container luckysheet-icon-img luckysheet-icon-cell-color" style="user-select: none;"> </div> </div> </div>'+
                        '</div>'+
                        '<div class="toningbox footer">'+
                            '<div class="toningShow"> '+ alternatingColors.footer +' </div>'+
                            '<div class="luckysheet-color-menu-button-indicator" title="'+ alternatingColors.selectionTextColor +'" style="border-bottom-color: #000;margin-right: 10px;"> <div class="luckysheet-icon luckysheet-inline-block"> <div aria-hidden="true" class="luckysheet-icon-img-container luckysheet-icon-img luckysheet-icon-text-color" style="user-select: none;"> </div> </div> </div>'+
                            '<div class="luckysheet-color-menu-button-indicator" title="'+ alternatingColors.selectionCellColor +'" style="border-bottom-color: #fff;"> <div class="luckysheet-icon luckysheet-inline-block"> <div aria-hidden="true" class="luckysheet-icon-img-container luckysheet-icon-img luckysheet-icon-cell-color" style="user-select: none;"> </div> </div> </div>'+
                        '</div>'+
                    '</div>'+
                    '<button id="luckysheet-alternateformat-remove" class="btn btn-default" style="margin: 10px;">'+ alternatingColors.removeColor +'</button>'+
                '</div>'+
            '</div>';
}

const luckysheetchartpointconfigHTML = '<div class="luckysheet-chart-point-config"> <div class="luckysheet-chart-point-config-set"> <div class="luckysheet-chart-point-config-left"> <div class="luckysheet-chart-point-config-left-top"> <div class="luckysheet-chart-point-searchcondition"> <div class="luckysheet-datavisual-content-row" style="margin-bottom: 0px;margin-top: 0px;height: 30px;"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:10%;white-space:nowrap;">选择维度</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:80%;"> <select data-tips="维度选择" name="luckysheetpointconfigsearchdim" id="luckysheetpointconfigsearchdim"> </select> </div> </div> <div class="luckysheet-datavisual-content-row" style="margin-bottom: 0px;margin-top: 3px;height: 30px;"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:10%;">排序</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:80%;"> <label data-tips="无排序" for="luckysheetpointconfigsearchorderno">无排序</label> <input type="radio" checked="checked" value="0" name="luckysheetpointconfigsearchorder" id="luckysheetpointconfigsearchorderno"> <label data-tips="升序" for="luckysheetpointconfigsearchorderasc">升序</label> <input type="radio" value="1" name="luckysheetpointconfigsearchorder" id="luckysheetpointconfigsearchorderasc"> <label data-tips="降序" for="luckysheetpointconfigsearchorderdesc">降序</label> <input type="radio" value="2" name="luckysheetpointconfigsearchorder" id="luckysheetpointconfigsearchorderdesc"> </div> </div> <div class="luckysheet-datavisual-content-row" style="margin-bottom: 0px;margin-top: 5px;height: 30px;"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:90%;text-align: left;"> <select data-width="70" data-tips="按照什么方式查询" name="luckysheetpointconfigsearchtype" id="luckysheetpointconfigsearchtype"> <option value="0" selected="selected">按照名称</option> <option value="1">按排序前%</option> </select> <input data-tips="查询关于点的关键字" id="luckysheetpointconfigsearchcontent" type="text" class="luckysheet-datavisual-config-input-no" style="width:40%;" placeholder="查询内容" /> <button id="luckysheetpointconfigsearchcomfirm" class="btn btn-primary luckysheet-model-conform-btn">查询</button> </div> </div> </div> </div> <div class="luckysheet-chart-point-config-left-mid"> <span id="luckysheet-chart-point-btn-all" class="luckysheet-mousedown-cancel">全选</span> - <span id="luckysheet-chart-point-btn-clear" class="luckysheet-mousedown-cancel">清除</span> - <span id="luckysheet-chart-point-btn-contra" class="luckysheet-mousedown-cancel">反选</span><span style="text-decoration:none;color:#8D8D8D;float:right;margin-right:40px;cursor:default;" class="luckysheet-mousedown-cancel">可以直接框选数据点</span> </div> <div class="luckysheet-chart-point-config-left-bottom"> <div class="luckysheet-chart-point-searchitem-c luckysheet-noselected-text">  </div> </div> </div> <div class="luckysheet-chart-point-config-right"> <div class="luckysheet-chart-point-itemconfig"> <div class="luckysheet-datavisual-content-row" style="font-size: 16px;font-weight: bold;"> 数据点设置 </div> <div class="luckysheet-datavisual-content-row"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:10%;white-space:nowrap;">图形颜色</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:80%;"> <input data-tips="颜色" class="luckysheet-datavisual-config-colorOpacity" id="scattersingleitemstylecolor" type="text" data-bigclass="scattersingle" data-attr="itemstyle" data-func="color" /> </div> </div> <div class="luckysheet-datavisual-content-row"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:10%;white-space:nowrap;">图形大小</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:80%;"> <select data-sliderdiy="scattersingleallsymbolsizeslider" data-tips="点大小设置" name="scattersingleallsymbolsize" id="scattersingleallsymbolsize" data-width="50" data-bigclass="scattersingle" data-attr="all" data-func="symbolsize"> <option value="4" selected="selected">4px</option> <option value="6">6px</option> <option value="8">8px</option> <option value="10">10px</option> <option value="12">12px</option> <option value="14">14px</option> <option value="16">16px</option> <option value="diy">自定义</option> </select> </div> </div> <div class="luckysheet-datavisual-content-row" style="display:none;"> <div data-tips="滑动修改点大小" id="scattersingleallsymbolsizeslider" data-bigclass="scattersingle" data-attr="all" data-func="symbolsize" class="luckysheet-datavisual-config-slider" style="width:70%;" data-min="1" data-max="50" data-step="1"></div> <input data-tips="自定义点大小" data-sliderid="scattersingleallsymbolsizeslider" id="scattersingleallsymbolsizesliderdiy" type="text" class="luckysheet-datavisual-config-input" data-bigclass="scattersingle" data-attr="all" data-func="symbolsize" placeholder="请输入" style="width:10%;margin-left:10px;text-align:center;margin-right: 2px;" /><label for="scattersingleallsymbolsizesliderdiy">px</label> </div> <div class="luckysheet-datavisual-content-row"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:10%;white-space:nowrap;">图形形状</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:80%;"> <select data-tips="点类型设置" data-width="70" name="scattersingleallsymboltype" id="scattersingleallsymboltype" data-bigclass="scattersingle" data-attr="all" data-func="symboltype"> <option value="emptyCircle" selected="selected">空心圆</option> <option value="circle">圆形</option> <option value="emptyRectangle">空心矩形</option> <option value="rect">矩形</option> <option value="roundRect">圆角矩形</option> <option value="emptyTriangle">空心三角</option> <option value="triangle">三角形</option> <option value="emptyDiamond">空心菱形</option> <option value="diamond">菱形</option> <option value="droplet">水滴</option> <option value="pin">标注</option> <option value="arrow">箭头</option> <option value="heart">心形</option> <option value="star">星星</option> </select> </div> </div> <div class="luckysheet-datavisual-content-rowsplit-sub"></div> <div class="luckysheet-datavisual-content-row"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:10%;white-space:nowrap;">边框粗细</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:80%;"> <select data-sliderdiy="scattersingleitemstyleborderwidthslider" data-tips="点边框粗细" name="scattersingleitemstyleborderwidth" id="scattersingleitemstyleborderwidth" data-width="50" data-bigclass="scattersingle" data-attr="itemstyle" data-func="borderwidth"><option value="0" selected="selected">无</option> <option value="1">1px</option> <option value="2">2px</option> <option value="3">3px</option> <option value="4">4px</option> <option value="5">5px</option> <option value="6">6px</option> <option value="7">7px</option> <option value="8">8px</option> <option value="diy">自定义</option> </select> </div> </div> <div class="luckysheet-datavisual-content-row" style="display:none;"> <div data-tips="滑动修改边框粗细" id="scattersingleitemstyleborderwidthslider" data-bigclass="scattersingle" data-attr="itemstyle" data-func="borderwidth" class="luckysheet-datavisual-config-slider" style="width:70%;" data-min="12" data-max="100" data-step="1"></div> <input data-tips="自定义边框粗细" data-sliderid="scattersingleitemstyleborderwidthslider" id="scattersingleitemstyleborderwidthsliderdiy" type="text" class="luckysheet-datavisual-config-input" data-bigclass="scattersingle" data-attr="itemstyle" data-func="borderwidth" placeholder="请输入" style="width:10%;margin-left:10px;text-align:center;margin-right: 2px;" /><label for="scattersingleitemstyleborderwidthsliderdiy">%</label> </div> <div class="luckysheet-datavisual-content-row"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:10%;white-space:nowrap;">边框样式</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:80%;"> <select data-tips="点边框类型设置" data-width="50" name="scattersingleitemstyleborderlinetype" id="scattersingleitemstyleborderlinetype" data-bigclass="scattersingle" data-attr="itemstyle" data-func="borderlinetype"> <option value="solid" selected="selected">实线</option> <option value="dashed">虚线</option> <option value="dotted">点线</option> </select> </div> </div> <div class="luckysheet-datavisual-content-row"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:10%;white-space:nowrap;">边框颜色</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:80%;"> <input data-tips="点边框颜色" class="luckysheet-datavisual-config-colorOpacity" id="scattersingleitemstyleborderlinecolor" type="text" data-bigclass="scattersingle" data-attr="itemstyle" data-func="borderlinecolor" /> </div> </div> <div class="luckysheet-datavisual-content-rowsplit-sub"></div> <div class="luckysheet-datavisual-content-row"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:10%;white-space:nowrap;"><i class="fa fa-th-large" aria-hidden="true"></i> 文字标签</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:80%;"> <label data-tips="显示数据点的标签" data-bigclass="scattersingle" data-attr="label" data-func="labelshow" for="scattersinglelabellabelshow">显示</label> <input type="radio" checked="checked" value="1" name="scattersinglelabellabelshow" id="scattersinglelabellabelshow" data-bigclass="scattersingle" data-attr="label" data-func="labelshow"> <label data-tips="隐藏数据点的标签" data-bigclass="scattersingle" data-attr="label" data-func="labelshow" for="scattersinglelabellabelshow1">隐藏</label> <input type="radio" value="0" name="scattersinglelabellabelshow" id="scattersinglelabellabelshow1" data-bigclass="scattersingle" data-attr="label" data-func="labelshow"> </div> </div> <div class="luckysheet-datavisual-content-row" style="height:auto;line-height: initial;margin-left:auto;" showfor="scattersinglelabellabelshow1" hidefor="scattersinglelabellabelshow"> <div class="luckysheet-datavisual-content-row"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:40%;">数值比例</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:50%;"> <select data-tips="刻度数值放大比例" name="scattersinglelabelformatratio" id="scattersinglelabelformatratio" data-bigclass="scattersingle" data-attr="label" data-func="formatratio"> <option value="0.01">乘以100</option> <option value="0.1">乘以10</option> <option value="1" selected="selected">默认</option> <option value="10">除以10</option> <option value="100">除以100</option> <option value="1000">除以1000</option> <option value="10000">除以1万</option> <option value="100000">除以10万</option> <option value="1000000">除以一百万</option> <option value="10000000">除以一千万</option> <option value="100000000">除以一亿</option> <option value="1000000000">除以十亿</option> </select> </div> </div> <div class="luckysheet-datavisual-content-row"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:40%;white-space: nowrap;">小数位数</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:50%;"> <select data-tips="数值小数点位数" name="scattersinglelabelfloatlen" id="scattersinglelabelfloatlen" data-bigclass="scattersingle" data-attr="label" data-func="floatlen"> <option value="auto" selected="selected">自动显示</option> <option value="0">整数</option> <option value="1">1位小数</option> <option value="2">2位小数</option> <option value="3">3位小数</option> <option value="4">4位小数</option> <option value="5">5位小数</option> <option value="6">6位小数</option> <option value="7">7位小数</option> <option value="8">8位小数</option> </select> </div> </div> <div class="luckysheet-datavisual-content-row"> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:20%;">标签格式</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:70%;"> <select data-sliderdiy="scattersinglelabelcontentformatslider" data-tips="标签显示格式" name="scattersinglelabelcontentformat" id="scattersinglelabelcontentformat" data-bigclass="scattersingle" data-attr="label" data-func="contentformat"> <option value="default" selected="selected">默认</option> <option value="1">仅数据名</option> <option value="2">数据名+2维数值</option> <option value="5">数据名+全部数值</option> <option value="diy">自定义</option> </select> </div> </div> <div style="display:none;"> <div class="luckysheet-datavisual-content-row" id="scattersinglelabelcontentformatslider"> <div style="text-align:center; width:60px; display:inline-block;">数据名称</div> <label data-tips="是否显示数据名" data-bigclass="scattersingle" data-attr="label" data-func="scattersingledatalabelshow" for="scattersinglelabeldatalabelshow" style="font-weight:bold;"><i class="fa fa-eye" aria-hidden="true"></i></label> <input type="checkbox" checked="checked" name="scattersinglelabeldatalabelshow" id="scattersinglelabeldatalabelshow" data-bigclass="scattersingle" data-attr="label" data-func="scattersingledatalabelshow"> <input data-tips="显示在数据名前部文字" placeholder="前缀" id="scattersinglelabeldatalabelprefix" type="text" class="luckysheet-datavisual-config-input" style="width:60px;height:19px;" data-bigclass="scattersingle" data-attr="label" data-func="scattersingledatalabelprefix" /> <input data-tips="显示在数据名尾部文字" placeholder="后缀" id="scattersinglelabeldatalabelsuffix" type="text" class="luckysheet-datavisual-config-input" style="width:60px;height:19px;" data-bigclass="scattersingle" data-attr="label" data-func="scattersingledatalabelsuffix" /> <label data-tips="是否在数据名后换行" data-bigclass="scattersingle" data-attr="label" data-func="scattersingledatalabelline" for="scattersinglelabeldatalabelline" style="font-weight:bold;">换行</label> <input type="checkbox" checked="checked" name="scattersinglelabeldatalabelline" id="scattersinglelabeldatalabelline" data-bigclass="scattersingle" data-attr="label" data-func="scattersingledatalabelline"> </div> </div> <div class="luckysheet-datavisual-content-row" > <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-title luckysheet-datavisual-content-column-2x" style="width:10%;white-space:nowrap;">标签位置</div> <div class="luckysheet-datavisual-content-column luckysheet-datavisual-content-column-right luckysheet-datavisual-content-column-2x" style="width:80%;"> <select data-sliderdiy="scattersinglelabellabelplaceslider" data-tips="标签距离图形位置" data-width="70" name="scattersinglelabellabelplace" id="scattersinglelabellabelplace" data-bigclass="scattersingle" data-attr="label" data-func="labelplace"> <option value="top" selected="selected">顶端</option> <option value="left">左侧</option> <option value="right">右侧</option> <option value="bottom">底部</option> <option value="inside">内部居中</option> <option value="diy">自定义</option> <option value="insideLeft">内部左侧</option> <option value="insideRight">内部右侧</option> <option value="insideTop">内部顶端</option> <option value="insideBottom">内部底端</option> <option value="insideTopLeft">内部左上</option> <option value="insideBottomLeft">内部左下</option> <option value="insideTopRight">内部右上</option> <option value="insideBottomRight">内部右下</option> </select> </div> </div> <div class="luckysheet-datavisual-content-row" style="display:none;height:65px;"> <div data-tips="滑动修改点文本水平位置" id="scattersinglelabellabelplaceslider" data-bigclass="scattersingle" data-attr="label" data-func="labelplacediy" class="luckysheet-datavisual-config-slider" style="width:70%;" data-min="-100" data-max="100" data-step="1"></div> <input data-tips="自定义点文本水平位置" data-sliderid="scattersinglelabellabelplaceslider" id="scattersinglelabellabelplacesliderdiy" type="text" class="luckysheet-datavisual-config-input" data-bigclass="scattersingle" data-attr="label" data-func="labelplacediy" placeholder="请输入" style="width:10%;margin-left:10px;text-align:center;margin-right: 2px;" /><label for="scattersinglelabellabelplacesliderdiy">px</label> <br /> <div data-tips="滑动修改点文本垂直位置" id="scattersinglelabellabelplaceslider1" data-bigclass="scattersingle" data-attr="label" data-func="labelplacediy" class="luckysheet-datavisual-config-slider" style="width:70%;" data-min="-100" data-max="100" data-step="1"></div> <input data-tips="自定义点文本垂直位置" data-sliderid="scattersinglelabellabelplaceslider1" id="scattersinglelabellabelplaceslider1diy" type="text" class="luckysheet-datavisual-config-input" data-bigclass="scattersingle" data-attr="label" data-func="labelplacediy" placeholder="请输入" style="width:10%;margin-left:10px;text-align:center;margin-right: 2px;" /><label for="scattersinglelabellabelplaceslider1diy">px</label> </div> <div class="luckysheet-datavisual-content-row"> <label data-tips="加粗" data-bigclass="scattersingle" data-attr="label" data-func="labelbold" for="scattersinglelabellabelbold" style="font-weight:bold;"><i class="fa fa-bold" aria-hidden="true"></i></label> <input type="checkbox" name="scattersinglelabellabelbold" id="scattersinglelabellabelbold" data-bigclass="scattersingle" data-attr="label" data-func="labelbold"> <label data-tips="斜体" data-bigclass="scattersingle" data-attr="label" data-func="labelitalic" for="scattersinglelabellabelitalic" class="luckysheet-datavisual-content-column-italic"><i class="fa fa-italic" aria-hidden="true"></i></label> <input type="checkbox" name="scattersinglelabellabelitalic" id="scattersinglelabellabelitalic" data-bigclass="scattersingle" data-attr="label" data-func="labelitalic"> <select data-sliderdiy="scattersinglelabellabelfontsizeslider" data-width="50" data-tips="字体大小" name="scattersinglelabellabelfontsize" id="scattersinglelabellabelfontsize" data-bigclass="scattersingle" data-attr="label" data-func="labelfontsize"> <option value="12">12px</option> <option value="14">14px</option> <option value="16">16px</option> <option value="18">18px</option> <option value="20">20px</option> <option value="22">22px</option> <option value="24">24px</option> <option value="30">30px</option> <option value="36">36px</option> <option value="diy">自定义</option> </select> <input data-tips="字体颜色" class="luckysheet-datavisual-config-color" id="scattersinglelinelabelcolor" type="text" data-bigclass="scattersingle" data-attr="label" data-func="labelcolor" /> </div> <div class="luckysheet-datavisual-content-row" style="display:none;"> <div data-tips="滑动修改字体大小" id="scattersinglelabellabelfontsizeslider" data-bigclass="scattersingle" data-attr="label" data-func="labelfontsize" class="luckysheet-datavisual-config-slider" style="width:70%;" data-min="12" data-max="100" data-step="1"></div> <input data-tips="自定义字体大小" data-sliderid="scattersinglelabellabelfontsizeslider" id="scattersinglelabellabelfontsizesliderdiy" type="text" class="luckysheet-datavisual-config-input" data-bigclass="scattersingle" data-attr="label" data-func="labelfontsize" placeholder="请输入" style="width:10%;margin-left:10px;text-align:center;margin-right: 2px;" /><label for="scattersinglelabellabelfontsizesliderdiy">px</label> </div> </div> </div> </div> </div> <div class="luckysheet-chart-point-config-chart"> <div id="luckysheet-chart-point-config-chart-c" class="luckysheet-chart-point-config-chart-c"> </div> </div> </div>';
const luckysheetToolHTML = '<div id="luckysheet-tooltip-up" class="jfk-tooltip" role="tooltip" aria-hidden="true" style="left: 505px; top: 410px;"><div class="jfk-tooltip-contentId">组合图表</div><div class="jfk-tooltip-arrow jfk-tooltip-arrowup" style="left: 35.5px;"><div class="jfk-tooltip-arrowimplbefore"></div><div class="jfk-tooltip-arrowimplafter"></div></div></div>';

// toolbar
function menuToolBar() {
    return createToolbarHtml();
}

function customLoadingConfig() {
    const _locale = locale();
    const info = _locale.info;
    const config = {
        enable: true,
        image: 'image://static/css/loading.gif',
        text: ' ',

        // image: 'image://loading.gif',
        // text: info.loading,
        viewBox: "32 32 64 64", // 只有为path时，才会使用
        imageClass: '',
        textClass: '',
        customClass: ''
    }
    if (JSON.stringify(luckysheetConfigsetting.loading) !== '{}') {
        Object.assign(config, luckysheetConfigsetting.loading);
    }
    return config;
}

const luckysheetloadingImage = function (config) {
    if(typeof config.image==="function"){
        return config.image()
    }
    const regE = new RegExp("^(image|path)://");
    const regResult = regE.exec(config.image);
    let imageHtml = '';
    if (regResult !== null) {
        const prefix = regResult[0];
        const type = regResult[1];
        const imageStr = regResult.input.substring(prefix.length);
        switch (type) {
            case "image":
                // imageHtml = `<div class="image-type" style="background-image: url(${imageStr});"></div>`;
                imageHtml = `<div class="image-type" style="background-image: url(${imageStr});width:50px;height:50px;margin:0 auto"></div>`;
                break;
            case "path":
                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                svg.setAttribute("class", "path-type");
                svg.setAttribute("viewBox", config.viewBox);
                const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                path.setAttribute("d", imageStr);
                path.setAttribute("fill", "currentColor");
                svg.appendChild(path);
                imageHtml = svg.outerHTML;
                break;
            default:
                break;
        }
    }
    return imageHtml;
}

const luckysheetlodingHTML = function (target, coverConfig) {
    if (!target) {
        return;
    }
    const config = customLoadingConfig();
    if (coverConfig && JSON.stringify(coverConfig) !== "{}") {
        Object.assign(config, coverConfig);
    }
    if (typeof config.enable === "boolean" && config.enable === false) {
        return {
            el: '',
            show: show,
            close: close
        }
    }
    const imageHtml = luckysheetloadingImage(config);
    const id = "luckysheet-loading-" + uuid.v4();
    // nby  加载图标
    const loadingHtml = `
        <div class="luckysheet-loading-content"> 
            <div class="${config.imageClass} luckysheet-loading-image" >
                ${imageHtml}
            </div>
            <div class="${config.textClass} luckysheet-loading-text">
            <span>${config.text}</span>
            </div>    
        </div>`;
    const loading = document.createElement("div");
    loading.id = id;
    loading.className = "luckysheet-loading-mask " + config.customClass;
    $(loading).html(loadingHtml);
    $(target).append(loading);

    function show() {
        if(id){
            $("#" + id).show();
        }     
    }

    function close() {
        if(id){
            $("#" + id).hide();
        }  
    }
    return {
        el: loading,
        show: show,
        close: close
    };
}

// var menusetting = {
//     menu_selectall: '<div id="luckysheet-selectall-btn-title"><i class="fa fa-i-cursor"></i> 全选</div>',
//     menu_copy: '<div id="luckysheet-copy-btn-title"><i class="fa fa-copy"></i> 复制</div>',
//     menu_undo: '<div id="luckysheet-redo-btn-title"><i class="fa fa-reply"></i> 撤销</div>',
//     menu_redo: '<div id="luckysheet-undo-btn-title"><i class="fa fa-share"></i> 恢复</div>',
//     menu_paste: '<div id="luckysheet-paste-btn-title"><i class="fa fa-clipboard"></i> 粘贴</div>',
//     menu_download: '<div id="luckysheet-download-btn-title"><i class="fa fa-cloud-download"></i> 下载</div>',
//     menu_share: '<div id="luckysheet-share-btn-title"><i class="fa fa-share-alt"></i> 分享</div>',
//     menu_chart: '<div id="luckysheet-chart-btn-title"> <i class="fa fa-pie-chart"></i> 图表生成</div>',
//     menu_pivot: '<div id="luckysheet-pivot-btn-title"> <i class="fa fa-cube" aria-hidden="true"></i> 数据透视表</div>',
//     menu_freezenrow: '<div id="luckysheet-freezen-btn-horizontal"><i class="fa fa-list-alt"></i> 冻结首行</div>',
//     menu_freezencolumn: '<div id="luckysheet-freezen-btn-vertical"><i class="fa fa-indent"></i> 冻结首列</div>',
// };

const luckyColor = [
    "#c1232b",
    "#27727b",
    "#fcce10",
    "#e87c25",
    "#b5c334",
    "#fe8463",
    "#9bca63",
    "#fad860",
    "#f3a43b",
    "#60c0dd",
    "#d7504b",
    "#c6e579",
    "#f4e001",
    "#f0805a",
    "#26c0c0",
    "#c12e34",
    "#e6b600",
    "#0098d9",
    "#2b821d",
    "#005eaa",
    "#339ca8",
    "#cda819",
    "#32a487",
    "#3fb1e3",
    "#6be6c1",
    "#626c91",
    "#a0a7e6",
    "#c4ebad",
    "#96dee8"
];

const keycode = {

    BACKSPACE: 8,
    TAB: 9,
    ENTER: 13,
    SHIFT: 16,
    CTRL: 17,
    PAUSE: 19,
    CAPSLOCK: 20,
    ESC: 27,

    SPACE: 33,
    PAGEUP: 33,
    PAGEDOWN: 34,
    END: 35,
    HOME: 36,
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40,
    INSERT: 45,
    DELETE: 46,

    WIN: 91,
    WIN_R: 92,
    MENU: 93,

    F1: 112,
    F2: 113,
    F3: 114,
    F4: 115,
    F5: 116,
    F6: 117,
    F7: 118,
    F8: 119,
    F9: 120,
    F10: 121,
    F11: 122,
    F12: 123,
    NUMLOCK: 144,
    SCROLLLOCK: 145
};

const luckysheetdefaultstyle = {
    fillStyle: "#000000",
    textBaseline: "middle",
    strokeStyle: "#dfdfdf",
    rowFillStyle: "#5e5e5e",
    textAlign: 'center'
}

const luckysheetdefaultFont = function(){
    return  'normal normal normal '+ Store.defaultFontSize +'pt '+ locale().fontarray[0] +', "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC",  "WenQuanYi Micro Hei", sans-serif';
} 

const luckysheet_CFiconsImg = new Image();
luckysheet_CFiconsImg.src = "";

const iconfontObjects = {
    border:{
        'border-top': ' iconfont luckysheet-iconfont-shangbiankuang',
        'border-bottom': ' iconfont luckysheet-iconfont-xiabiankuang',
        'border-left': ' iconfont luckysheet-iconfont-zuobiankuang',
        'border-right': ' iconfont luckysheet-iconfont-youbiankuang',
        'border-leftdiagonal': ' iconfont luckysheet-iconfont-xiangshangqingxie',
        'border-rightdiagonal': ' iconfont luckysheet-iconfont-xiangxiaqingxie',
        'border-none': ' iconfont luckysheet-iconfont-wubiankuang',
        'border-all': ' iconfont luckysheet-iconfont-quanjiabiankuang',
        'border-outside': ' iconfont luckysheet-iconfont-sizhoujiabiankuang',
        'border-inside': ' iconfont luckysheet-iconfont-neikuangxian',
        'border-horizontal': ' iconfont luckysheet-iconfont-neikuanghengxian',
        'border-vertical': ' iconfont luckysheet-iconfont-neikuangshuxian',
    },
    align:{
        'left': ' iconfont luckysheet-iconfont-wenbenzuoduiqi',
        'center': ' iconfont luckysheet-iconfont-wenbenjuzhongduiqi',
        'right': ' iconfont luckysheet-iconfont-wenbenyouduiqi',
        'top': ' iconfont luckysheet-iconfont-dingbuduiqi',
        'middle': ' iconfont luckysheet-iconfont-shuipingduiqi',
        'bottom': ' iconfont luckysheet-iconfont-dibuduiqi',
    },
    textWrap:{
        'overflow': ' iconfont luckysheet-iconfont-yichu1',
        'wrap': ' iconfont luckysheet-iconfont-zidonghuanhang',
        'clip': ' iconfont luckysheet-iconfont-jieduan',
    },
    rotation:{
        'none': ' iconfont luckysheet-iconfont-wuxuanzhuang',
        'angleup': ' iconfont luckysheet-iconfont-xiangshangqingxie',
        'angledown': ' iconfont luckysheet-iconfont-xiangxiaqingxie',
        'vertical': ' iconfont luckysheet-iconfont-shupaiwenzi',
        'rotation-up': ' iconfont luckysheet-iconfont-wenbenxiangshang',
        'rotation-down': ' iconfont luckysheet-iconfont-xiangxia90',
    }
}

/**
 *单元格右击菜单配置
 *
 */
function customCellRightClickConfig() {
    const config = {
        pasteNum:true,//仅粘贴为数值
        source:true,
        insertColumnCopy:true,
        insertRowCopy:true,
        insertCellImg:true,//插入单元格图片
        adjustRowOrColumn:true,//删除空白行或列
        indicator:true,//set as indicator
        cancelIndicator:false, //取消指标
		copy: true, // copy
		copyAs: true, // copy as
		paste: true, // paste
		insertRow: true, // insert row
		insertColumn: true, // insert column
		deleteRow: true, // delete the selected row
		deleteColumn: true, // delete the selected column
		deleteCell: true, // delete cell
		hideRow: true, // hide the selected row and display the selected row
		hideColumn: true, // hide the selected column and display the selected column
		rowHeight: true, // row height
		columnWidth: true, // column width
		clear: true, // clear content
		matrix: true, // matrix operation selection
		sort: true, // sort selection
		filter: true, // filter selection
		chart: true, // chart generation
		image: true, // insert picture
		link: true, // insert link
		data: true, // data verification
		cellFormat: true // Set cell format
	}

    // cellRightClickConfig determines the final result
    if(JSON.stringify(luckysheetConfigsetting.cellRightClickConfig) !== '{}'){
        Object.assign(config,luckysheetConfigsetting.cellRightClickConfig);
    }
    luckysheetConfigsetting.cellRightClickConfig = config;
    return config;
}

/**
 *sheet页右击菜单配置
 *
 */
function customSheetRightClickConfig() {
    const config = {
        delete: true, //Delete
        copy: true, //Copy
        rename: true, //Rename
        color: true, //Change color
        hide: true, //Hide, unhide
        move: true, //Move to the left, move to the right
	}

    // sheetRightClickConfig determines the final result
    if(JSON.stringify(luckysheetConfigsetting.sheetRightClickConfig) !== '{}'){
        Object.assign(config,luckysheetConfigsetting.sheetRightClickConfig);
    }
    luckysheetConfigsetting.sheetRightClickConfig = config;
    return config;
}
const mydiagonalDiv = `
    <div class="diagonalDiv" id='leftDiagonal' style="position:fixed;left:200px;top:200px;width:200px;height:100px;z-index:99999999;border:1px solid silver;background-color: #fff;display: none;">
        <div style="width: 100%;height:30px;">
            <div id="closeDiagonalDiv" class="cancelDiagonal" style="float: right;font-size: 16px;width: 20px;height: 30px;line-height: 30px;cursor: pointer;">&#10005;</div>
        </div>
        <div id="diagonalInput" style="clear: both;width: 100%;height: 30px;display: flex;justify-content: center;align-items: center;">
        <input type="text" placeholder="输入格式：文字,文字"></div>
        <div style="display: flex;justify-content: flex-end;margin-top: 10px;">
            <button id="confirmDiagonal" style="margin-right: 10px;">确定</button>
            <button class="cancelDiagonal" style="margin-right: 10px;">取消</button>
        </div>
    </div>`

const rightDiagonal = `
<div class="diagonalDiv" id='rightDiagonal' style="position:fixed;left:200px;top:200px;width:200px;height:100px;z-index:99999999;border:1px solid silver;background-color: #fff;display: none;">
    <div style="width: 100%;height:30px;">
        <div id="closeDiagonalDiv" class="cancelDiagonal" style="float: right;font-size: 16px;width: 20px;height: 30px;line-height: 30px;cursor: pointer;">&#10005;</div>
    </div>
    <div id="rightDiagonalInput" style="clear: both;width: 100%;height: 30px;display: flex;justify-content: center;align-items: center;">
    <input type="text" placeholder="输入格式：文字,文字"></div>
    <div style="display: flex;justify-content: flex-end;margin-top: 10px;">
        <button id="rightConfirmDiagonal" style="margin-right: 10px;">确定</button>
        <button class="righttcancelDiagonal" style="margin-right: 10px;">取消</button>
    </div>
</div>`
export {
    gridHTML,
    columeHeader_word,
    columeHeader_word_index,
    flow,
    colsmenuHTML,
    mydiagonalDiv,
    rightDiagonal,
    rightclickHTML,
    pivottableconfigHTML,
    pivottablesumHTML,
    sheetHTML,
    columnHeaderHTML,
    sheetselectlistHTML,
    sheetselectlistitemHTML,
    inputHTML,
    modelHTML,
    maskHTML,
    filtermenuHTML,
    filtersubmenuHTML,
    sheetconfigHTML,
    luckysheetPivotTableHTML,
    luckysheetAlternateformatHtml,
    luckysheetchartpointconfigHTML,
    luckysheetToolHTML,
    menuToolBar,
    luckysheetlodingHTML,
    luckyColor,
    keycode,
    luckysheetdefaultstyle,
    luckysheet_CFiconsImg,
    luckysheetdefaultFont,
    iconfontObjects,
}